progress demo 进度条5个实例

demo1

 进度条-单纯添加遮罩  add shade for seconds

code below:

html

The shade is a div named loading which is hide when page is loading.

css

 Then content of shade is a gif image linked in background.

js

After 3 seconds, the shade section fadeout so that the main container of page show up.

demo2
根据内容加载的进度条 progress according to content

html

css

js

When the event status is complete, the shade fades out.
The knowledge reference:
通过加载状态事件制作进度条
document.onreadystatechange  页面加载状态改变时的事件
document.readyState  返回当前文档的状态
1.uninitialized 还未开始载入
2.loading 载入中
3.interactive 已加载，文档与用户可以开始交互
4.complete 载入完成

demo3
css3进度条小动画  css3 animation progress

html

 Each strip is a tag <i>.

css1

 Transform makes the tag<i> shorter and animate the load animation.

css2

 Each <i> delay 0.1s one by one.

js

demo4
定位在头部的进度 progress at the top page

css

html+js

In the body, executing a script after every section because of the sequence of brower read.

demo5
实时获取加载进度条 ajax progress with number

html

css

The pic animation gif:

js

When the images is loading,the number add automatically.The number show the percentage of total images length. When all the images loaded,the shade hide out. 

Similar progress:

NProgress.js plugin article here