Html 圆形边框进度条

如何使用CSS创建此循环进度条（兼容IE10+、FF、chrome、safari…）是否可行 我认为我们可以使用SVG来实现这一点，但我不知道如何实现这一点

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

---

此圆圈进度条改编自以下答案：

它使用SVG和Snap.SVG来设置蓝色笔划和计数器的JS动画：

var count=$（'#count'）；
$（{Counter:0}）.animate（{Counter:count.text（）}{
持续时间：5000，
“线性”，
步骤：函数（）{
count.text（Math.ceil（this.Counter）+“%”；
}
});
var s=捕捉（'动画'）；
var progress=s.select（“#progress”）；
attr（{strokeDasharray:'0251.2'}）；
捕捉动画（0251.2，函数（值）{
attr（{'stroke dasharray'：value+'，251.2'}）；
}, 5000);
body{文本对齐：居中；字体系列：无衬线；背景：#080808；}
svg{width:25%；}

100%
我认为网站：可以帮助你

您可以在这里查看演示：在这一行：

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]）
您能提供一些您亲手尝试过的代码吗？太棒了！很完美，就像我想要的那样。非常感谢@web tiki请检查此答案。问题可能与@Alexandr_TT done；）中的问题相同