百分比进度条效果是比较常用的特效之一，它能让人们在等待的时间内不那么无聊，能够提供给人们信息，阿萌此次来介绍一种利用javascript+CSS实现简单的思路。

进度条的实现方法很多，此次介绍的思路是：准备两个容器，背景颜色各不相同，利用绝对定位或者相对定位等方法层叠在一起，先设置顶部容器宽度为0，然后随着进度的百分比参数改变顶部容器的宽度比例，从而制作出类似于灌水一样的进度条效果。

下面放代码，大家可以自己推敲吧，思路就是上面的思路：

CSS：

body{margin:0px;padding:0px;}

#ibox{background:#ccc;line-height:20px;width:300px;height:20px;text-align:left;margin:0 auto;}

#itop{background:red;line-height:20px;width:0px;height:20px;color:#fff;font-size:14px;text-align:center;position:absolute;}

代码：

window.οnlοad=function(){

var itop = document.getElementById('itop');

var ibox = document.getElementById('ibox');

var timer = null;

var ispeed = 10;

timer=setInterval(function(){

var iWidth = itop.offsetWidth/ibox.offsetWidth*100;

itop.style.width = itop.offsetWidth+1+'px';

itop.innerHTML = Math.round(iWidth)+"%";

if(iWidth == 100){clearInterval(timer);}

},ispeed);

}