圆形百分比进度条 [英] Circular percent progress bar

问题描述

我想在我的网站上显示百分比圆圈指标：

在这种情况下，它显示75％。应该怎么做呢？我有一个图像文件中的黄色圆圈，但如果它更容易，一些怎么样，这一切使用CSS，这对我没关系。

解决方案

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

DEMO： p>

在下面的示例中，使用 stroke-dasarray 属性来动画进度，％数字会随jQuery增加：

  var count = $（（'＃count'））; $ {计数器：计数器：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 =animatedviewbox =0 0 100 100> < circle cx =50cy =50r =45fill =＃FDB900/> < path fill =nonestroke-linecap =roundstroke-width =5stroke =＃fffstroke-dasharray =251.2,0d =M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80> < animate attributeName =stroke-dasharrayfrom =0,251.2to =251.2,0dur =5s/> < / path> < text id =countx =50y =50text-anchor =middledy =7font-size =20> 100％< / text>< / svg> ;  

---

不幸IE不支持svg SMIL动画。要在IE支持下实现相同的结果，可以使用snap.svg这样的库，并使用JS为 stroke-dasharray 属性设置动画：

  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 .attr（{'stroke-dasharray'：value +'，251.2'}）;}，5000）;  

  > >  
 < 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 =svgviewbox =0 0 100 100> < circle cx =50cy =50r =45fill =＃FDB900/> < path fill =nonestroke-linecap =roundstroke-width =5stroke =＃fffstroke-dasharray =1,250.2d =M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80/> < text x =50y =50text-anchor =middledy =7font-size =20> 1％< / text>< / svg>< svg viewbox =0 0 100 100> < circle cx =50cy =50r =45fill =＃FDB900/> < path fill =nonestroke-linecap =roundstroke-width =5stroke =＃fffstroke-dasharray =125.6,125.6d =M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80/> < text x =50y =50text-anchor =middledy =7font-size =20> 50％< / text>< / svg>< svg id =animatedviewbox =0 0 100 100> < circle cx =50cy =50r =45fill =＃FDB900/> < path id =progressstroke-linecap =roundstroke-width =5stroke =＃ffffill =noned =M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80> < / path> < text id =countx =50y =50text-anchor =middledy =7font-size =20> 100％< / text>< / svg> ;  
 

I would like to have an percent circle indicator on my site:

In this case it's showing 75%. How should this be done? I have the yellow circle in a image-file, but if it's easier to, some how, do it all using CSS, that's okay with me.

解决方案

Considering the shape of the progress bar (rounded end/start) I would suggest using SVG.

DEMO: Radial progress bar

In the following example, the progress is animated with the stroke-dasarray attribute and the % numbers are incremented with 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>

---

Unfortunatly IE doesn't support svg SMIL animations. To achieve the same result with IE support, you can use a library like snap.svg and animate the stroke-dasharray attribute with 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>

这篇关于圆形百分比进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！