1、NProgress.js
这是一个基于JQuery的插件，轻量级的ajax进度条应用。
// 通过clone文件下来，导出NProgress.css和NProgress.js文件 <script src='nprogress.js'></script> <link rel='stylesheet' href='nprogress.css'/> // 或者NPM npm install --save nprogress // 或者CDN https://unpkg.com/nprogress@0.2.0/nprogress.js https://unpkg.com/nprogress@0.2.0/nprogress.css // 进度条开始结束 NProgress.start(); NProgress.done(); // 百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1 NProgress.set(0.0);2、Pace.js
这是一个非常有意思的加载框架
参考文献
// 通过clone文件下来，导出Pace.js文件，和在themes文件夹中选择一种loading动画效果 // 在head里面引入文件,引入即可，无需再配置其他 <link rel="stylesheet" href="/pace/themes/blue/pace-theme-center-atom.css"> <script src="/pace/pace.js"></script> // 自定义配置 paceOptions = { ajax: false, // disabled document: false, // disabled eventLag: false, // disabled elements: { selectors: ['.mytest'] } }; // API Pace.start：开始显示进度条，如果你不是使用AMD或者Browserify来加载模块的话，这个会默认执行。 Pace.restart：进度条重新加载以及显示。 Pace.stop：隐藏进度条以及停止加载。 Pace.track：监测一个或者多个请求任务。 Pace.ignore：忽略一个或者多个请求任务 // 调用API Pace.on('event', 'fu()') // 重新加载 Pace.restart() // pace.js进度条插件无法通过ajax启动的解决办法 $(document).ajaxStart(function() { Pace.restart(); });3、Nanobar.js
非常非常轻量级的进度条，压缩过后仅有730字节。不需要引入jQuery
npm install nanobar // 引入 <script src="path/to/nanobar.js"></script> // 启动 var nanobar= new Nanobar(options); // options参数 var options = { bg <String>：（可选）CSS背景颜色属性，默认为”#000″即黑色。 id <String>：（可选）nanobar的div的id target <DOM Element>：设置防止进度条HTML代码的位置，若target为空则会固定到document的顶部位置 } // 进度运动 nanobar.go(percentage)：调整进度 percentage <Number>：nonabar的百分比，取值为0-100转载于:https://www.cnblogs.com/zjh-study/p/10647026.html
相关资源：进度加载条css3动画效果.zip