svg和css3如何实现环形渐变进度条-创新互联

这篇文章主要介绍了svg和css3如何实现环形渐变进度条，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

阿图什网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作，到程序开发，运营维护。创新互联于2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

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

代码如下：

<!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如何实现环形渐变进度条内容对大家有帮助，同时也希望大家多多支持创新互联成都网站设计公司，关注创新互联成都网站设计公司行业资讯频道，遇到问题就找创新互联成都网站设计公司，详细的解决方法等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻标题：svg和css3如何实现环形渐变进度条-创新互联
文章链接：https://www.cdcxhl.com/article10/dedhgo.html

成都网站建设公司_创新互联，为您提供微信公众号、品牌网站设计、搜索引擎优化、定制开发、企业建站、商城网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容