css3是一个神奇的东西，刚才一时手痒，写了一个很简单的进度条不用js：

直接嵌套一个div，然后设置里面的div用animation动画就可以了。

html:

loading css:

.loading{            width: 300px;            height: 15px;            border-radius: 10px;            border: 1px solid blue;            box-shadow: 2px 2px 5px 1px blue;        }

progress css:

.progress{            width:0%;//设置起始时的进度为0            height: 100%;            background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,blue), to(#7BC3FF));            border-radius: 10px;        }

然后动画可以用animation和transition都可以来做。

以animation为例：

@-webkit-keyframes aaa{            0%{ width: 0%; }            30%{width:30%; }            60%{width:60%;}            100%{width:80%; }        }        .progress{            width:0%;            height: 100%;                      background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,blue), to(#7BC3FF));            border-radius: 10px;                       -webkit-animation:aaa 2s linear;        }