利用原生javascript实现进度条（可做页面头部进度条，或者局部进度条均可）

Posted 2020-09-21

 1 <div class="top-progress" id="js-top-progress"></div> <!--结构只有一句话即可-->
 2 <script src="./static/js/progress.js"></script>
 3 <script type="text/javascript">
 4   var p = myProgress.create(document.getElementById("#js-top-progress"), "#21a557", false); 
     //第一个参数必须为原生dom对象
　　  //第二个参数为进度条的颜色
 5   //第三个参数默认为true，表示进度条走完是否还显示
 6   p.start(); //进度条开始走
 7     
 8   window.onload = function() {
 9     p.over(); //页面加载完毕，调用，让进度条走完到100%
10   }
11 </script>

今天闲来无事，实现了一下现在常见的页面头部的载入进度条，上面就是使用方法，很简单的几句话，有需要的朋友可以拿去。

代码效果可以去我的这个页面查看 http://www.bx1987.com/edu/

源码可以去这里下载

https://github.com/blff122620/jsLibary/blob/master/static/js/progress.js