NProgress 前端开发者必备进度条插件

NProgress 

一. 下载

NProgress下载地址 http://ricostacruz.com/nprogress/

二. 引入 css 和 js 文件 

< link rel= "stylesheet" href= "./assets/nprogress/nprogress.css">

< script src= "./assets/nprogress/nprogress.js">script>

三. 配置

NProgress.configure({ 
    minimum: 0.1,    //    配置最低百分比
    ease: 'ease',    //    配置动画模式
    speed: '500',    //    配置动画速度
    trickle: false,    //    关闭进度条步进
    showSpinner: false,    //    关闭进度环
    parent: '#container'    //    指定NProgress生成代码的父级元素, 默认body
});

四. 方法

//    进度条开始
NProgress.start();
//    百分比进度
NProgress.set(0.5);
//    进度一点点
NProgress.inc();
//    结束进度条
NProgress.done();

五. 全局启用, 一旦ajax请求发生, 开始使用

/* 这里使用用jquery配合演示 */   
//    ajax请求开始 进度条开始
$(window).ajaxStart(() => {
    NProgress.start();
});
//    ajax 请求结束进度条结束
$(window).ajaxComplete(() => {
    NProgress.done();
})