JS进度加载条效果

这是一个基于JQuery的插件，轻量级的ajax进度条应用。

// 通过clone文件下来，导出NProgress.css和NProgress.js文件
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

// 或者NPM
npm install --save nprogress

// 或者CDN
https://unpkg.com/[email protected]/nprogress.js
https://unpkg.com/[email protected]/nprogress.css

// 进度条开始结束
NProgress.start();
NProgress.done();

// 百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1
NProgress.set(0.0);

2、Pace.js

这是一个非常有意思的加载框架

参考文献

// 通过clone文件下来，导出Pace.js文件，和在themes文件夹中选择一种loading动画效果
// 在head里面引入文件,引入即可，无需再配置其他
<link rel="stylesheet" href="/pace/themes/blue/pace-theme-center-atom.css">
<script src="/pace/pace.js"></script>
    
// 自定义配置
paceOptions = {
    ajax: false, // disabled
    document: false, // disabled
    eventLag: false, // disabled
    elements: {
    selectors: ['.mytest']
  }
};

// API
Pace.start：开始显示进度条，如果你不是使用AMD或者Browserify来加载模块的话，这个会默认执行。
Pace.restart：进度条重新加载以及显示。
Pace.stop：隐藏进度条以及停止加载。
Pace.track：监测一个或者多个请求任务。
Pace.ignore：忽略一个或者多个请求任务

// 调用API
Pace.on('event', 'fu()')
    
// 重新加载
Pace.restart()
    
// pace.js进度条插件无法通过ajax启动的解决办法
$(document).ajaxStart(function() { Pace.restart(); });

3、Nanobar.js

非常非常轻量级的进度条，压缩过后仅有730字节。不需要引入jQuery

npm install nanobar

// 引入
<script src="path/to/nanobar.js"></script>
    
// 启动
var nanobar= new Nanobar(options);

// options参数
var options = {
        bg <String>：（可选）CSS背景颜色属性，默认为”#000″即黑色。
        id <String>：（可选）nanobar的div的id
        target <DOM Element>：设置防止进度条HTML代码的位置，若target为空则会固定到document的顶部位置
    }

// 进度运动
nanobar.go(percentage)：调整进度
percentage <Number>：nonabar的百分比，取值为0-100

JS进度加载条效果

猜你喜欢