循环百分比进度栏

Question

我希望在我的网站上有一个百分比圆圈指示器

在这种情况下，显示为75％。应该怎么做？我在图像文件中有一个黄色圆圈，但是如果更容易使用CSS来完成所有操作，那么我可以。

Answer 1

考虑到进度条的形状（结束/开始是四舍五入的），我建议使用SVG。

演示：径向进度栏

径向进度栏

在以下示例中，使用stroke-dasarray属性为进度设置动画效果，并使用jQuery将％数字递增：

var count = $(('#count'));

$({ Counter: 0 }).animate({ Counter: count.text() }, {

  duration: 5000,

  easing: 'linear',

  step: function () {

    count.text(Math.ceil(this.Counter)+ "%");

  }

});


body{text-align:center;font-family: 'Open Sans', sans-serif;}

svg{width:30%;}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg id="animated" viewbox="0 0 100 100">

  <circle cx="50" cy="50" r="45" fill="#FDB900"/>

  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"

        stroke-dasharray="251.2,0"

        d="M50 10

           a 40 40 0 0 1 0 80

           a 40 40 0 0 1 0 -80">

    <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>

  </path>

  <text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text>

</svg>

不幸的是，IE不支持SVG SMIL动画。要在IE支持下达到相同的结果，可以使用snap.svg之类的库，并stroke-dasharray使用JS 设置属性的动画：

var count = $(('#count'));

$({ Counter: 0 }).animate({ Counter: count.text() }, {

  duration: 5000,

  easing: 'linear',

  step: function () {

    count.text(Math.ceil(this.Counter)+ "%");

  }

});



var s = Snap('#animated');

var progress = s.select('#progress');



progress.attr({strokeDasharray: '0, 251.2'});

Snap.animate(0,251.2, function( value ) {

    progress.attr({ 'stroke-dasharray':value+',251.2'});

}, 5000);

body{text-align:center;font-family:sans-serif;}
svg{width:30%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>

<svg id="svg" viewbox="0 0 100 100">

  <circle cx="50" cy="50" r="45" fill="#FDB900"/>

  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"

        stroke-dasharray="1,250.2"

        d="M50 10

           a 40 40 0 0 1 0 80

           a 40 40 0 0 1 0 -80"/>

  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">1%</text>

</svg>

<svg viewbox="0 0 100 100">

  <circle cx="50" cy="50" r="45" fill="#FDB900"/>

  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"

        stroke-dasharray="125.6,125.6"

        d="M50 10

           a 40 40 0 0 1 0 80

           a 40 40 0 0 1 0 -80"/>

  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">50%</text>

</svg>



<svg id="animated" viewbox="0 0 100 100">

  <circle cx="50" cy="50" r="45" fill="#FDB900"/>

  <path id="progress" stroke-linecap="round" stroke-width="5" stroke="#fff" fill="none"

        d="M50 10

           a 40 40 0 0 1 0 80

           a 40 40 0 0 1 0 -80">

  </path>

  <text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text>

</svg>