前端如何实现后端运行进度_实现前端网页加载进度条的几种方法

下面有三种方式，看自己需求：

一、顶部进度条

在html代码中间插入jq代码 执行动画。页面加载到哪部分，进度条就会相应的向前走多少

当全部加载完成后将loading进度条模块隐藏

顶部进度条

.loading {position: fixed;top: 0;left: 0; width: 100%; height: 100%; background-color: #fff;}

.pic {width: 0;height: 10px;background-color: #c33;border-radius: 5px;}

$(".loading .pic").animate({width: "20%"},100);

$(".loading .pic").animate({width: "40%"},100);

$(".loading .pic").animate({width: "60%"},100);

$(".loading .pic").animate