NProgress.js是极细的纳米级进度条，用现实的细线条动画让用户看到网页正在发生的事情！ 你也许已经在 Youtube 上看过了那道红色激光脉冲，它会在你切换页面时出现。其实许多移动浏览器的进度条都是这个样式，但是在网页上实现可不多见。不过，有了 NProgress 这个 jQuery 插件，你也可以轻松实现！ NProgress.js应用于复杂网页的细长进度条。由 Google, YouTube, 和 Medium 提供灵感。 [b]安装[/b] 依赖于 jQuery (1.8版本及以上)，添加 nprogress.js 和 nprogress.css 到你的项目中。 [b]使用方法[/b] NProgress.start() — 显示进度条 NProgress.set(0.4) —设置百分比 NProgress.inc() — 增加一点点 NProgress.done() — 完成进度条 你也可以… 添加到你调用 Ajax 的地方！绑定它到 jQuery ajaxStart 和 ajaxStop 事件上 没有 Turbolinks/Pjax 一样可以制造一个美妙的进度条！把它绑定到 $(document).ready 和$(window).load [b]配置插件 [/b] 通过 minimum 来修改最小百分比。 NProgress.configure({ minimum: 0.1 }); 你可以通过 template 修改标记结构。为了保证进度条正常工作，需要一个包含 role='bar' 属性的元素。 NProgress.configure({ template: "..." }); 通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed （毫秒ms）。 NProgress.configure({ ease: 'ease', speed: 500 }); 想关闭进度条步进？设置 trickle 为 false。 NProgress.configure({ trickle: false }); 你可以调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔，单位毫秒ms). NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 }); 想禁用进度环？设置 showSpinner 为 false。 NProgress.configure({ showSpinner: false }); 在线演示 [url=http://ricostacruz.com/nprogress/]http://ricostacruz.com/nprogress/[/url] 源码下载 [url=https://github.com/rstacruz/nprogress]https://github.com/rstacruz/nprogress[/url]