最新消息:ShuipFCMS 已经发布

NProgress - 实现和 Youtube 一样的细长进度条

JavaScript 0浏览 1评论

你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现。其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见。不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现!


Youtube 上的加载进度条



安装

依赖于 jQuery (1.8版本及以上),添加 nprogress.js 和 nprogress.css 到你的项目中。

使用方法

 — 显示进度条

 —设置百分比

 — 增加一点点

 — 完成进度条

你也可以...

  • 添加到你调用 Ajax 的地方!绑定它到 jQuery ajaxStart 和 ajaxStop 事件上

  • 没有 Turbolinks/Pjax 一样可以制造一个美妙的进度条!把它绑定到 $(document).ready 和$(window).load

配置插件

通过 minimum 来修改最小百分比。

NProgress.configure({ minimum: 0.1 });

你可以通过 template 修改标记结构。为了保证进度条正常工作,需要一个包含 role='bar' 属性的元素。

NProgress.configure({
  template: "<div class='....'>...</div>"});

通过 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 });

NProgress: slim progress bars in JavaScript

NProgress官网 | Github 项目

转载请注明:水平凡's Blog » NProgress - 实现和 Youtube 一样的细长进度条