怎样在页面上展示一个进度条？

首先我们分析一下需求：

1.进度条滚动显示的一个外框
2.进度条本身的一个显示框
3.随着时间推移，外边框没有变化，内边框的宽度逐渐变宽
4.达到某个值时，内边框宽度不再增加。

下边，我们来逐条实现：

1.进度条滚动显示的一外框以及外框内显示的进度条框

<div class="outer">//外层框
    <div class="inner"></div>//内层框
</div>

2.边框样式进行修饰：

<style type="text/css">
    .outer{
        width: 300px;
        height: 30px;
        padding: 10px 0;
        background: #eee;
    }
    .inner{
        height: 30px;
        width: 0px;
        background: red;
    }
</style>

3.让内部框宽度逐渐增加

<script>
    var oInner = document.querySelectorAll(".inner")[0];//获取DOM元素。
    var count = 0;//计数器，时间每前进一个单位，使其值增加一下
    var timer = setInterval(function(){//定时器
        count++;//每次使计数器的值增加1
        oInner.style.width = count + "px";//使内部块的宽度样式值为计数器当前的值
        if(count == 100){//当计数器值达到100时，清楚定时器
            clearInterval(timer);//清除定时器
        }
    },20);//每20毫秒，定时器启动一次，内部代码执行一次，直到定时器被清掉
</script>

以上代码，我们就完成了一个简单的滚动条效果。