前言：
现时姐妹们对“jquery漂亮的进度条”大致比较关怀，你们都需要学习一些“jquery漂亮的进度条”的相关资讯。那么小编同时在网上收集了一些关于“jquery漂亮的进度条””的相关资讯，希望咱们能喜欢，兄弟们一起来了解一下吧！知识点：jQuery animate()动画函数 ，setInterval()函数
效果视频：
视频加载中...
代码展示
html代码：
<div class="load_wrapper"> <p class="load_plan"></p> <div class="load_animate"> <div></div> </div> </div>
css代码：
/* init */*{ margin:0; padding:0;}/* back */body{ height:1000px; overflow: hidden; background-image: url(../img/back.jpg); background-repeat:no-repeat; background-size:100% 100%;}/* show */div.load_wrapper{ width:100%; height:400px; position: absolute; top:50%; left:50%; margin-left:-50%; margin-top:-200px;}div.load_wrapper p.load_plan{ font-size:25px; font-weight:bold; color:#fff; text-align: center; line-height:200px;}div.load_wrapper div.load_animate{ width:100%; height:25px; border-radius:20px; border:1px solid rgb(158, 158, 158); position: absolute; top:50%; left:50%; margin-top:-12.5px; margin-left:-50%;}div.load_wrapper div.load_animate div{ width:0%; height:26px; border-radius:20px; background-color:rgb(36, 222, 255);}javascript代码：
$(function () { let $target = $('div.load_wrapper div.load_animate div'), $text = $('div.load_wrapper p.load_plan'), $timer = null, $count = 0; clearInterval($timer); $timer = setInterval(function () { $target.animate({ width: '+=1%' },0, 'linear') $text.text($count + '%'); $count++; if ($count == 100) { clearInterval($timer); $text.text('网页加载完成'); } }, 100)})说明：图片来源于网络，如有侵权，请联系作者删除
版权声明：转载时，请注明出处，谢谢
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jquery漂亮的进度条
