圆形边框进度条[重复]答案

【问题标题】：Circle border progress bar [duplicate]圆形边框进度条[重复]
【发布时间】：2017-05-25 23:03:26
【问题描述】：

如何使用 CSS 创建这个圆形进度条甚至可能（兼容 IE10+、FF、chrome、safari...）？
我认为我们可以为此使用 SVG，但我不知道如何制作。

在圆圈周围，有一个小边框或阴影，根据进度百分比动态变化。如果百分比为 100%，则边框将完全围绕填充进度条的圆圈。

【问题讨论】：

您能提供一些您亲手尝试过的代码吗？

标签： html css svg css-shapes

【解决方案1】：

这个圆形进度条改编自这个答案：circular progress bar

它使用带有 Snap.svg 的 SVG 为蓝色笔划和 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;background:#080808;}
svg{width:25%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="animated" viewbox="0 0 100 100">
  <path id="progress" stroke-width="3" stroke="#4596AB" fill="none"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
  </path>
  <circle cx="50" cy="50" r="38" fill="transparent" stroke="#fff" stroke-width="1"/>
  <text id="count" x="50" y="50" fill="#fff" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg>

【讨论】：

太棒了！很完美，就像我想要的一样。非常感谢！
@web-tiki 请也检查这个答案问题可能和这个answer中的一样@

【解决方案2】：

我认为那个网站：https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9#.2fflbvwrt 可以帮助你

您可以在此处查看演示：http://jsfiddle.net/andsens/Yns9P/ 在此行：

window.randomize = function() {
    $('.radial-progress').attr('data-progress', Math.floor(Math.random() * 100));
}

您可以将attr('data-progress', Math.floor(Math.random() * 100)) 更改为attr('data-progress', [your_pourcentage])

【讨论】：