suchen

Heim  >  Artikel  >  Web-Frontend  >  Codebeispiel für die Implementierung eines Fortschrittsbalkens mit kreisförmigem Verlauf mithilfe von SVG und CSS3

Codebeispiel für die Implementierung eines Fortschrittsbalkens mit kreisförmigem Verlauf mithilfe von SVG und CSS3

不言
不言nach vorne
2018-11-23 16:39:173640Durchsuche

Der Inhalt dieses Artikels befasst sich mit dem Codebeispiel von SVG und CSS3 zur Implementierung eines kreisförmigen Verlaufsbalkens. Ich hoffe, dass es für Sie hilfreich ist.

In dem Projekt, für das ich verantwortlich war, bestand Bedarf an einem Lesefortschrittseffekt mit kreisförmigem Farbverlauf, daher habe ich die relevanten Informationen online überprüft und sortiert.

Der Code lautet wie folgt: 

<!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>

Das obige ist der detaillierte Inhalt vonCodebeispiel für die Implementierung eines Fortschrittsbalkens mit kreisförmigem Verlauf mithilfe von SVG und CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Einführung in die grundlegende Verwendung von HTML5 CanvasNächster Artikel：Einführung in die grundlegende Verwendung von HTML5 Canvas

In Verbindung stehende Artikel

Mehr sehen