svg和css3实现环形渐变进度条的代码示例

nbsp;html&gt;  <meta>  <title>Title</title>  <script></script>  <div>    <svg>      <circle></circle>      <circle></circle>      <circle></circle>      <defs>        <lineargradient>          <stop></stop>          <stop></stop>          <stop></stop>        </lineargradient>      </defs>    </svg>    <div>      <div>        <span></span><span>%</span>      </div>    </div>  </div>  <script>    window.onload=function () {      &#39;use strict&#39;;      var ProgressCircle = (function () {        function ProgressCircle(percent,radius,elementClass){         this._percent = percent;  //百分比         this._radius = radius;    //圆的半径         this._elementClass = elementClass;         }       ProgressCircle.prototype.calcDashOffset = function () {         var circumference;           circumference = Math.PI * (2 * this._radius);   //计算圆圈的周长           return Math.round(circumference - this._percent / 100 * circumference);  //计算圆圈要渲染的 长度！         }        //渲染进度条        ProgressCircle.prototype.createCSS = function() {          return $("." + this._elementClass + " .circle_bar").css(&#39;stroke-dashoffset&#39;, this.calcDashOffset());        };        //读取效果        ProgressCircle.prototype.updateText = function () {          $("." + this._elementClass + " .js-donut-figure")[0].innerText = this._percent;        }        ProgressCircle.prototype.init = function() {          var _this = this;          setTimeout(function(){            _this.updateText();            return _this.createCSS();          },1000);        };        return ProgressCircle;      })();      let progress = new ProgressCircle(50, 150, &#39;donut&#39;);      progress.init();    }  </script>  <style>  *{    padding:0;    margin:0    }  .donut{    position: relative;  }  .circle_warp{    position: relative;    top: 0;    left: 0  }  .circle_bar {    stroke-dasharray: 942.4777960769379;  //计算整个圆周的周长公式为Circumstance=2*PI*Radius  2*3.14*半径（此时是半径是150）    stroke-dashoffset: 942.4777960769379;    transition: stroke-dashoffset 1200ms cubic-bezier(.99,.01,.62,.94);  }  .donut_svg{    transform: rotate(-90deg);  }  .donut_copy{    text-align: center;    width: 340px;    height: 340px;    top: 40%;    left: 0;    position: absolute;  }  .donut_title{    opacity: 0;    font-size: 42px;    color: #171717;    margin-bottom: 2px;    animation: donutTitleFadeLeft 800ms 200ms cubic-bezier(.99,.01,.22,.94) forwards;    transform: translateX(0);    font-weight: bold;  }  .donut_spic{    content: "%";    animation: donutTitleFadeRight 800ms 200ms cubic-bezier(.99,.01,.22,.94) forwards;    opacity: 0;    transform: translateY(-20px);  }  .donut__text p{    font-size: 16px;    color: #AAAAAA;  }  @keyframes donutTitleFadeLeft {    from {      opacity: 0;      transform: translateX(0);    }    to {      opacity: 1;      transform: translateX(10px);    }  }  @keyframes donutTitleFadeRight {    from {      opacity: 0;      transform: translateX(-30px);    }    to {      opacity: 1;      transform: translateX(0);    }  }</style>