svg和css3建立環形漸變進度條

ellalihui發表於2019-02-16
SVGCSSS3

在負責的專案中，有一個環形漸變讀取進度的效果的需求，於是在網上查閱相關資料整理一下。
程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
  <div class="donut">
    <svg width="340" height="340" xmlns="http://www.w3.org/2000/svg" class="donut_svg">
      <circle r="150" cy="170" cx="170" stroke-width="10" stroke="#FAFAFA" fill="none" />
      <circle class="circle_bar" r="150" cy="170" cx="170" stroke-width="35" stroke="url(#linearGradient)" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
      <circle class="dot" 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 class="donut_copy">
      <div class="donut_title">
        <span class="js-donut-figure"></span><span class="donut_spic">%</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" lang="scss">
  *{
    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>

原文地址：根據原文思路修改的程式碼來實現的效果，有興趣的可以看下
http://www.techbrood.com/zh/n…

相關文章