组态王怎么做进度条_如何用 javascript 做一个高逼格的进度条

可能你发现了本站顶部的进度条，它是如何实现的呢？下面一起来看。

页面进度条展示的是资源下载的进度，通常在页面上加上进度条，可以缓解用户的等待焦虑，也提升了网站的逼格。

前端进度条实现

在前端，实现网页的进度条目前还没有一个比较精确的方案，都是一些模拟进度。即页面打开的时候是 1%，然后定时器增加进度到 99%，然后 window.onload 之后，进度跑到 100%。

在前端，ajax 资源的上传和下载，html5 中都可以获取进度的，此文不谈。

实现准备

html 文件

进度条

先写一个进度条 div，放在body最前面。

在写样式：

.progress{

position: fixed;

top: 0;

right: 0;

left: 0;

height: 20px;

background: #f5f5f5;

border-bottom: 1px solid #ddd;

}

.progress-inner{

width: 0;

background: #d43f3a;

position: absolute;

top: 0;

left: 0;

bottom: 0;

}

为了显示进度，还需要添加几个 iframe：

脚本

接下来开始写脚本，将进度条展示的脚本写在页面的最顶部，保证它是最先运行的，这