寻找了大部分的网页顶部进度条文章，终于找到最简单的方案了

http://github.hubspot.com/pace/

待会在下面贴上代码

<script src="__PUBLIC__/index/js/pace/pace.min.js"></script>  
<link rel="stylesheet" type="text/css" href="__PUBLIC__/index/js/pace/dataurl.css">

 

如需知道原理，看     http://www.haorooms.com/post/jq_js_xxjdt

另外，还有一款插件也不错，稍微多点代码  https://github.com/usablica/progress.js

dataurl.css

.pace {  
  -webkit-pointer-events: none;  
  pointer-events: none;  
  
  -webkit-user-select: none;  
  -moz-user-select: none;  
  user-select: none;  
}  
  
.pace-inactive {  
  display: none;  
}  
  
.pace .pace-progress {  
  background: #29d;  
  position: fixed;  
  z-index: 2000;  
  top: 0;  
  right: 100%;  
  width: 100%;  
  height: 2px;  
}