先看效果图：
顶部进度条会根据浏览页面而变化，话不多说，
代码附上：
1 <script>
2 (function (w, d) {
3 var domDiv = d.createElement('div');
4
5 domDiv.style.cssText = 'position: fixed; top: 0; left: 0; width: 0; height: 3px;' +
6 'box-shadow: 0 0 3px #999; background: -webkit-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet );z-index: 999999;-webkit-transition:width .3s linear;'
7
8 d.body.appendChild(domDiv);
9
10 var domH = w.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;
11
12 w.addEventListener('scroll', function () {
13 var divsw = domDiv.style.width = Math.round(pageYOffset / (d.body.offsetHeight - domH) *
14 100) + '%';
15 }, false);
16 })(window, document);
17 </script>
标签：body,domDiv,进度条,博客园,浏览,width,var,美化 From： https://www.cnblogs.com/zhangshuhao1116/p/18229063