登录 注册

php|python|golang|C语言|XMl|前端|数据库|运维|工具类|微信|JAVA|

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

html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

本篇文章给大家带来的内容是关于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实现环形渐变进度条的代码示例的详细内容，更多请关注其它相关文章！