用原生js做进度条，布局非常简单，一个盒子里放一个span标签，让它的宽度为0，并且转成块元素。
主要用定时器动态增加span的宽度，并且当它的宽度大于父级盒子的宽度的时候停止
效果如下：
一 css如下：
*{margin: 0;padding: 0;}#box{width: 500px;height: 30px;margin: 50px auto;overflow: hidden;border: 1px solid #CCCCCC;border-radius: 15px;}span{height: 30px;width: 0;display: block;line-height: 30px;background: red;text-indent: 250px;color: #000;}</style></head><body><div id="box"><span id="bar"></span></div>
二 js代码：
<script>//获取dom元素var obar=document.getElementById("bar");//定义一个定时器，因为后面要清除我们给它命名var timer=setInterval(function(){//速度为3，匀速，也可以利用随机数函数让速度随机var speed=3;//设置退出条件，当span的宽度大于盒子超出就清除定时器if(obar.offsetWidth>=500){clearInterval(timer);}else{//条件不满足时我们span的宽度为当前宽度加速度obar.style.width=speed+obar.offsetWidth+"px"//由于浮点数误差，这边我们乘以一百再取整。obar.innerHTML=parseInt(obar.offsetWidth/500*100)+"%"}},30)</script>
原生js做一个简单的进度条
原文地址：https://www.cnblogs.com/MikePan/p/9123329.html