jquery+svg实现视觉差异的进度条加载效果代码-html代码-BFW代码库

代码语言：html

所属分类：进度条

代码描述：jquery+svg实现视觉差异的进度条加载效果代码，鼠标移动可实现三维视觉差异效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        html {
          font-size: 10px;
          background: #222;
          background: linear-gradient(to bottom, #222 0%, #000 100%);
        }
        
        body {
          font-family: "Titillium Web", sans-serif;overflow: hidden
        }
        
        @-webkit-keyframes enterAnimation {
          0% {
            transform: scale(0) translate3d(0, 0, 500px) rotateX(45deg);
          }
          100% {
            transform: scale(1) translate3d(0, 0, 0px) rotateX(0deg);
          }
        }
        
        @keyframes enterAnimation {
          0% {
            transform: scale(0) translate3d(0, 0, 500px) rotateX(45deg);
          }
          100% {
            transform: scale(1) translate3d(0, 0, 0px) rotateX(0deg);
          }
        }
        @-webkit-keyframes turnAnimation {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(-360deg);
          }
        }
        @keyframes turnAnimation {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(-360deg);
          }
        }
        @-webkit-keyframes bounceAnimation {
          0% {
            transform: translate3d(-50%, -50%, 0px);
          }
          100% {
            transform: translate3d(-50%, -50%, 50px);
          }
        }
        @keyframes bounceAnimation {
          0% {
            transform: translate3d(-50%, -50%, 0px);
          }
          100% {
            transform: translate3d(-50%, -50%, 50px);
          }
        }
        @-webkit-keyframes flickerAnimation {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        @keyframes flickerAnimation {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        .container {
          width: 300px;
          margin: 0 auto;
        }
        
        .inner-circle {
          width: 20em;
          height: 20em;
          border: 1px solid #ff6a13;
          border-radius: 20em;
        }
        
        .percentage {
          font-size: 4em;
          text-align: center;
          color: #fff;
          display: block;
          border: 1px solid #ff6a13;
          width: 3em;
          height: 3em;
          margin: 0 auto;
          border-radius: 3em;
          line-height: 3em;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate3d(-50%, -50%, 50px);
        }
        
        .moving-counter {
          position: absolute;
          top: 50%;
          left: 50%;
          z-index: 300;
          transform: rotate(0deg);
        }
        .moving-counter:after {
          content: "";
          display: block;
          position: absolute;
          width: 20px;
          height: 15px;
          background: white;
          top: 0;
          width: 4px;
          z-index: 1000;
          transform: translate3d(0, -400px, 180px);
        }
        
        .main-container {
          width: 100vw;
          height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 250ms all ease-out;
          transform-style: preserve-3d;
          perspective: 1000px;
        }
        
        .svg-container {
          position: relative;
          transform-style: preserve-3d;
          -webkit-animation: enterAnimation 2500ms forwards cubic-bezier(0, 0, 0.25, 1.125);
                  animation: enterAnimation 2500ms forwards cubic-bezier(0, 0, 0.25, 1.125);
        }
        
        svg {
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          transform-origin: 50% 50%;
        }
        
        rect, circle, path, polygon, circle, g {
          display: block;
          transform-origin: 50% 50%;
        }
        
        .loader-bg {
          opacity: 0.33;
          transform: translate3d(-50%, -50%, 50px);
        }
        .loader-bg path {
          animation: turnAnimation 10s reverse infinite linear;
        }
        
        .loader-main {
          opacity: 1;
          opacity: 0.33;
          transform: translate3d(-50%, -50%, 10px);
        }
        
        .outer-circle-1 {
          opacity: 0.25;
          opacity: 0.33;
          transform: translate3d(-50%, -50%, 100px);
        }
        
        .outer-circle-2 {
          transform: translate3d(-50%, -50%, 50px);
        }
        .outer-circle-2 path {
          -webkit-animation: turnAnimation 500s infinite linear;
                  animation: turnAnimation 500s infinite linear;
        }
        
        .middle-circle {
          opacity: 0.5;
          -webkit-animation: bounceAnimation 1s alternate infinite linear;
                  animation: bounceAnimation 1s alternate infinite linear;
        }
        
        .inner-circle {
          transform: translate3d(-50%, -50%, 25px);
        }
        
        .outer-triangles {
          opacity: 0.33;
          transform: translate3d(-50%, -50%, 200px);
        }
        
        .outer-triangles polygon,
        .middle-doodads polygon {
          fill: #ffffff;
        }
        .outer-triangles rect,
        .middle-doodads rect {
          opacity: 0.5;
          fill: #ffffff;
          -webkit-animation: flickerAnimation 5s ease-out alternate infinite;
                  animation: flickerAnimation 5s ease-out alternate infinite;
        }
        
        .middle-dooodads {
          transform: translate3d(-50%, -50%, -50px);
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>

<bod>
    <div class="main-container">
        <span class="percentage">0%</span>
        <span class="moving-counter"></span>
        <div class="svg-container">
            <svg class="loader-bg" version=".........完整代码请登录后点击上方下载按钮下载查看