jQuery nprogress.js页面加载进度条

所属分类:UI-加载

 65081  406  查看评论 (4)
分享到微信朋友圈
X
jQuery nprogress.js页面加载进度条 ie兼容10

下面是调用方法的说明,打开Index.html页面直接可以看效果

  • NProgress.start() ? 显示进度条

  • NProgress.set(0.4) ? 设置百分比

  • NProgress.inc() ? 一个小增量

  • NProgress.done() ? 完成进度


使用方法

你也可以...

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

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


配置插件

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


相关插件-加载

带刻度的进度条

html5 CSS3渐变进度条动画效果
  加载
 33549  312

jQuery简单进度条插件

jQuery简单实用的轻量级进度条插件
  加载
 102029  344

JQueryCanvas环形进度条(原创)

JQueryCanvas环形进度条插件
  加载
 31761  327

申请表单进度表

申请表单进度表
  加载
 36545  498

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ╉坏?谨┵メ 0
    2017/1/8 15:01:26

    呵呵呵呵,饿这些

    回复
    小8。 ⌒∫⌒ 1
    2015/10/27 17:10:00

    我记得这样的效果好像还有另外一种。不知道是不是这个修改而来,很华丽的。

        TTROC0
        2017/2/10 9:44:00

        是哪一种?

    回复
    吃水果的狼 0
    2015/9/21 17:09:53
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复