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

在负责的项目中，有一个环形渐变读取进度的效果的需求，于是在网上查阅相关资料整理一下。

代码如下：

!DOCTYPE htML>
    html>
    head>
      meta charset="UTF-8">
      tITle>
    Title/title>
      script src="https://code.jquery.COM/jquery-3.1.1.min.js">
    /script>
    /head>
    body>
      div>
        svg width="340" height="340" XMlns="http://www.w3.org/2000/svg">
          circle r="150" cy="170" cx="170" stroke-width="10" stroke="#FAFAFA" fill="none" />
          circle r="150" cy="170" cx="170" stroke-width="35" stroke="url(#lineargradient)" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
          circle fill="#FFFFFF" fill-rule="nonzero" cx="320" cy="170" r="12">
    /circle>
          defs>
            linearGradient x1="0%" y1="80.9878035%" x2="96.9769965%" y2="41.7547666%" id="linearGradient">
              stop stop-color="#18A6FF" offset="0%">
    /stop>
              stop stop-color="#32B7FF" offset="52.7095376%">
    /stop>
              stop stop-color="#0094F1" offset="100%">
    /stop>
            /linearGradient>
          /defs>
        /svg>
        div>
          div>
            span>
    /span>
    span>
    %/span>
          /div>
        /div>
      /div>
      script type="text/javascript">
    window.onload=function () {
          'use strict';
      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('stroke-dashoffset', 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, 'donut');
          progress.init();
    }
      /script>
      style type="text/css">
  *{
        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>
    /html>
    

以上就是svg和css3实现环形渐变进度条的代码示例的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！