自己动手制作基于jQuery的Web页面加载进度条插件

静态效果的实现

网页顶部加载进度条，近年来很流行，很多网站都采用了这种加载方式。网上也有这样类似的插件，今天我们总结一下网页顶部线性页面加载进度条。

大体的写法如下：

body{
margin:0;
}
#progress {
position:fixed;
height: 2px;
background:#2085c5;
transition:opacity 500ms linear
}
#progress.done {
opacity:0
}
#progress span {
position:absolute;
height:2px;
-webkit-box-shadow:#2085c5 1px 0 6px 1px;
-webkit-border-radius:100%;
opacity:1;
width:150px;
right:-10px;
-webkit-animation:pulse 2s ease-out 0s infinite;
}