• 兄弟网络技术博客网正式开通,我们为大家提供免费资源,欢迎大家踊跃投稿!

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

前端开发 兄弟网络 4个月前 (05-13) 154次浏览 0个评论
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>

兄弟网络技术博客, 版权所有丨如未注明 , 均为原创
转载请注明原文链接:jQuery实现数字百分比进度条加载动画特效
喜欢 (2)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址