考虑到进度条的形状（结束/开始是四舍五入的），我建议使用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 10a 40 40 0 0 1 0 80a 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 10a 40 40 0 0 1 0 80a 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 10a 40 40 0 0 1 0 80a 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 10a 40 40 0 0 1 0 80a 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>
