NProgress.js全站进度条插件

参考官网：http://ricostacruz.com/nprogress/

类似  移动设备的浏览器都有一条蓝色或者是红色的loading加载进度条，它会在你切换页面时出现，有了 NProgress 这个 jQuery 插件

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

二、安装插件
添加 jQuery (1.8 or above)，nprogress.js 和 nprogress.css 到你的项目中。

NProgress也可以通过bower 和 npm 或者 spm 安装。

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

@NPprogress的使用：

1、安装
$ npm install --save nprogress 
// 或者
$ yarn add nprogress

//用法
NProgress.start();
NProgress.done();

2、使用
router.js：

 //导入
 import NProgress from 'nprogress' 
 import 'nprogress/nprogress.css' 
 
router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

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

基础入门
简单的调用 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的取值范围是0到1.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);
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
想关闭进度条步进？设置 trickle 为 false。

NProgress.configure({ trickle: false });
trickleRate and trickleSpeed
你可以调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔，单位毫秒ms).

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
showSpinner
想禁用进度环？设置 showSpinner 为 false。

NProgress.configure({ showSpinner: false });
NProgress: 在javascript中显示进度条。

parent
指定NProgress生成代码的父级元素，默认为：body

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

NProgress.js

说明:

NProgress是基于jquery的，且版本要 >1.8

　　下载地址:

　　　　https://github.com/rstacruz/nprogress

　　API:

　　　　NProgress.start() — 启动进度条

　　　　NProgress.set(0.4) — 将进度设置到具体的百分比位置

　　　　NProgress.inc() — 少量增加进度

　　　　NProgress.done() — 将进度条标为完成状态

使用步骤:

　　　　1. 引入

12
//还有jquery要之前引入进来

　　　　2. 使用场景一:页面加载的效果  开始页面加载开始进度条  页面加载好  结束进度条

$(function() {

  　　NProgress.start();

  　　$(window).load(function() {

      　　NProgress.done();

  });

　　　　3.使用场景二:ajax发送的效果  开始发送开始进度条  成功后  结束进度条:

$(window).ajaxStart(function () {

$(window).ajaxStart(function () {

    NProgress.start();

});

$(window).ajaxStop(function () {

  NProgress.done();

});

//技巧总结    此方法挂在window上  是为了监听项目中所有的ajax请求

//ajax事件 可参考  jquery 文档 http://jquery.cuishifeng.cn/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！