-
HTML
我们要知道的第一件事就是没有浏览器可以直接目前得到的加载对象的大小。所以我们不能以数据的大小实现0-100%负载显示过程。
因此，我们需要通过HTML逐行加载的特性在整条代码的多跳行中设置节点，并进行粗略的模糊进度反馈以达到调度加载的效果，一般来说，当页面加载到指定的区域时，它返回（n）%的进度结果。通过设置多个节点，可以达到分步加载进度的目的。
如果有一个页眉，按左边栏和页脚内容划分成块，四部分，我们把四部分作为四个节点，每个节点在加载页面时，设置加载百分比，页面结构如下：
标题部分
左内容
右边侧栏
页脚
然后添加进度条，加载到下一行。
CSS
我们要设置加载进度条的样式，设置背景颜色、高度、位置、优先级等。
加载{。
背景：# ff6100； / /套进步的颜色
身高：5px； / /进度条的高度
位置：固定；设置为跟随进度条滚动屏幕
顶部：0；进度条将固定在页面顶部。
Z指数：99999 / /提高优先级别的进步，避免其他屏蔽层
}
jQuery
接下来，我们必须在每个节点后面添加一个进度动画，并使用jQuery来实现它。
标题部分
$（'。加载），动画（{ 'width：手脚% }，50）；
第一个节点/调度
左内容
$（'。加载），动画（{ 'width：州% }，50）；
第二个/附表节点
右边侧栏
$（'。加载），动画（{ 'width：80 % }，50）；
第三调度节点
页脚
$（'。加载），动画（{ 'width：百分之百}，50）；
第四调度节点
可以看出，在不加载节点之后，jQuery调用动画（）动画方法来实现进度条宽度的变化。每个节点的变化需要50毫秒时间才能使进度条看起来更平滑。最后，它从0%更改为100%，并完成进度条的进度动画。
当进度条达到100%时，页面被加载，最后一步是隐藏进度条。
$（文档）Ready（函数（）{）
$（'。加载）FadeOut（）；
}）；