分类
赚钱项目

jQuery实现数字百分比进度条加载动画特效

一款简单好看的jQuery数字百分比进度条加载动画特效,有进度条动画效果,又有数字动画效果,相当不错。

jQuery实现代码

<script type="text/javascript">
$(document).ready(function() {
  
  var counter = 0;
  var c = 0;
  var i = setInterval(function(){
      $(".loading-page .counter h1").html(c + "%");
      $(".loading-page .counter hr").css("width", c + "%");
      //$(".loading-page .counter").css("background", "linear-gradient(to right, #f60d54 "+ c + "%,#0d0d0d "+ c + "%)");

    /*
    $(".loading-page .counter h1.color").css("width", c + "%");
    */
    counter++;
    c++;
      
    if(counter == 101) {
        clearInterval(i);
    }
  }, 50);
});
</script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注