请耐心等待，因为我对jQuery＆JS相当陌生...
这是我到目前为止所拥有的。http://jsfiddle.net/hqwxogqt/1/
$(function(){
var $ppc = $('.progress'),
percent = parseInt($ppc.data('percent')),
deg = 360*percent/5;
if (percent > 2.5) {
$ppc.addClass('gt-50');
}
$('.ss-progress-fill').css('transform','rotate('+ deg +'deg)');
$('.ss-percent span').html(percent);
});
我实际上在某个地方找到了它并能够实现它，但是我不知道如何对其进行动画处理。
我想做的动画类似于如何在（此处为1-10）的整数计数器工作：awwwards.com
基本上只是让它从0移到从div元素获得的特定数字。该数字只需要从0-5开始，我也想将小数包括在内，但我不知道如何。
我尝试使用while循环＆我在网上找到的任何东西似乎都不起作用，可能是因为我不知道如何使用它，或者它不适用于我想做的事情。我没有选择...任何帮助将不胜感激。
这是基本思想：如果要让它们在设定的时间内进行动画处理，请计算步长，使其动态。
function updatePercentage () {
var elem = $(this);
var current = elem.data("percent-current") || 0;
var percent = parseFloat(current) + .1;
var max = parseFloat(elem.data("percent"));
if (percent > max) {
percent = max;
}
percent = percent.toFixed(1);
deg = 360*percent/5;
elem.data("percent-current", percent);
elem.toggleClass('gt-50', percent > 2.5);
elem.find('.ss-progress-fill').css('transform','rotate('+ deg +'deg)');
elem.find('.ss-percent span').html(percent);
if (percent != max) {
window.setTimeout( updatePercentage.bind(this), 100);
}
}
$(function(){
var $ppc = $('.progress');
$ppc.each(updatePercentage);
});.progress {width: 200px; height: 200px; border-radius: 50%; background-color: #E5E5E5; position: relative;}
.progress.gt-50 {background-color: #81CE97;}
.ss-progress {content: ""; position: absolute; border-radius: 50%; left: calc(50% - 100px); top: calc(50% - 100px); width: 200px; height: 200px; clip: rect(0, 200px, 200px, 100px);}
.ss-progress .ss-progress-fill { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 100px); top: calc(50% - 100px);
width: 200px; height: 200px; clip: rect(0, 100px, 200px, 0); background: #81CE97; transform: rotate(60deg);}
.gt-50 .ss-progress {clip: rect(0, 100px, 200px, 0);}
.gt-50 .ss-progress .ss-progress-fill {clip: rect(0, 200px, 200px, 100px); background: #E5E5E5;}
.ss-percent {content: ""; position: absolute; border-radius: 50%; left: calc(50% - 173.91304px/2); top: calc(50% - 173.91304px/2);
width: 173.91304px; height: 173.91304px; background: #fff; text-align: center; display: table;}
.ss-percent span {display: block; font-size: 2.6em; font-weight: bold; color: #81CE97;}
.ss-percent-wrapper {display: table-cell; vertical-align: middle;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="progress" data-percent="1">
<div class="ss-progress">
<div class="ss-progress-fill"></div>
</div>
<div class="ss-percent">
<div class="ss-percent-wrapper">
<span>%</span>
</div>
</div>
</div>
<div class="progress" data-percent="2.5">
<div class="ss-progress">
<div class="ss-progress-fill"></div>
</div>
<div class="ss-percent">
<div class="ss-percent-wrapper">
<span>%</span>
</div>
</div>
</div>
<div class="progress" data-percent="3">
<div class="ss-progress">
<div class="ss-progress-fill"></div>
</div>
<div class="ss-percent">
<div class="ss-percent-wrapper">
<span>%</span>
</div>
</div>
</div>
<div class="progress" data-percent="5">
<div class="ss-progress">
<div class="ss-progress-fill"></div>
</div>
<div class="ss-percent">
<div class="ss-percent-wrapper">
<span>%</span>
</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句