NProgress.js 全站 jQuery 进度条插件

发布于 2018-07-16 15:02:30 字数 3606 浏览 2450 评论 0

相信很多友友都发现,移动设备的浏览器都有一条蓝色或者是红色的 Loading 加载进度条,它会在你切换页面时出现,但是在网页上实现可不多见。不过有了 NProgress 这个 jQuery 插件,你也可以轻松实现!

插件介绍

这是来自菲律宾马尼拉的 [Rico Sta Cruz](http://ricostacruz.com/)实现了 Medium 和 YouTube 等知名网站最近开始采用的全站进度条 UI 模式,并以 MIT 许可证开源。

这个项目在 GitHub 上 Fork 过百,Star 超过 2400,算是比较火的新项目了。

安装插件

添加 jQuery (1.8 or above),nprogress.jsnprogress.css 到你的项目中。

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

NProgress 也可以通过 bowernpm 或者 spm 安装。

$ bower install --save nprogress
$ npm install --save nprogress

使用方法

接下来我们介绍一些如何使用这个插件。

基础入门

简单的调用 start()done()  方法来控制进度条。

NProgress.start();
NProgress.done();

Turbolinks

加入你使用Turbolinks 1.3.0+,那么你也可以这样使用:

$(document).on('page:fetch',   function() { NProgress.start(); });
$(document).on('page:change',  function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });

Pjax

如果你使用Pjax,也可以这样使用:

$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end',   function() { NProgress.done();  });

建议

  • 添加这个到有AJAX调用的地方!绑定到 jQuery ajaxStart 和 ajaxComplete 事件上。
  • 在不使用 Turbolinks/Pjax 的情况下做一个有特效的进度条事件! 绑定到  $(document).ready$(window).load

高级用法

Percentages:设置一个进度百分比,调用 .set(n),其中n的取值范围是01.0

NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()

Incrementing:添加一个进度,只需要调用 .inc() 方法,这是一个随机的增量。这个进度将永远不会得到100%:使用它为每一个图像加载(或类似)。

NProgress.inc();

如果你想通过某个特定的值来增加,你可以通过这个参数:

NProgress.inc(0.2);
// This will get the current status value and adds 0.2 until status is 0.994

Force-done:通过设置 done()true ,甚至是是不显示进度条(默认行为是 done()。如果没有则 start() 不会被调用)。

NProgress.done(true);

Get the status value:要获取当前的进度值,需要使用 .status 属性

var my_progress_val = NProgress.status;

配置插件

上面简介介绍如何使用NProgress.js,那么接下来我们来介绍一下这个插件的配置参数。

minimum

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

NProgress.configure({ minimum: 0.1 });

template

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

NProgress.configure({
  template: "..."
});

easing and speed

通过 ease (一个 CSS 中的 easing 值) 调整动画设置和速度 speed (毫秒ms)。

NProgress.configure({ ease: 'ease', speed: 500 });

trickle

想关闭进度条步进?设置 tricklefalse

NProgress.configure({ trickle: false });

trickleRate and trickleSpeed

你可以调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔,单位毫秒ms).

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

showSpinner

想禁用进度环?设置 showSpinnerfalse

NProgress.configure({ showSpinner: false });

NProgress: 在javascript中显示进度条。

parent

指定 NProgress 生成代码的父级元素,默认为:body

NProgress.configure({ parent: '#container' });

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。