jquery 中的动画圆形进度条，数字为 0-10+ 小数

Question

请耐心等待，因为我对 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 循环，我在网上找到的任何东西似乎都不起作用，可能是因为我不知道如何使用它，或者它不适用于我想做的事情。我只是没有选择... 任何帮助将不胜感激。

Answer 1

这是基本的想法：如果您希望它们在设定的时间内设置动画，请计算步长，以便它是动态的。

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>

jquery 中的动画圆形进度条，数字为 0-10+ 小数

animating round progress bars in jquery with numbers 0-10+decimals

javascript

css

jquery

progress-bar

jquery-animate