前端轻量级web进度条 – Nprogress & nanobar

进度条库是前端中常见的库之一，bootstrap中提供了多种进度条样式。NProgress.js和nanobar.js是两款轻量级的进度条组件，使用简便。用于页面刚打开时的页面加载进度显示。

官网

NProgress.js：http://ricostacruz.com/nprogress/

nanobar.js：http://nanobar.micronube.com/

1. NProgress

nprogress

简介
轻量级的ajax进度条应用，灵感来自Google, YouTube, and Medium。

纳米级的进度条。 具有逼真的动画涓涓细流来说服你的用户，something is happen！

安装
引入nprogress.js和nprogress.css到项目中。

基本用法

只需要调用start() 和 done()来控制进度条

NProgress.start();

NProgress.done();

高级用法

百分比：

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

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

NProgress.set(0.4);

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

递增：

要让进度条增加，只要调用 .inc()。这会产生一个随机增量，但不会让进度条达到100%。此函数适用于图片加载或其他类似的文件加载。

NProgress.inc();

强制完成：

通过传递 true 参数给done()，使进度条满格，即使它没有被显示。

NProgress.done(true);

配置

minimum：设置最低百分比

NProgress.configure({minimum:0.1});

template：改变进度条的HTML结构。为保证进度条能正常工作，需要元素拥有role=’bar’属性。

NProgress.configure({

  template:"
...
"

});

ease：调整动画设置，ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed为动画速度（单位ms）。

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

更多用法

https://github.com/rstacruz/nprogress

2. nanobar

nanobar

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

兼容性：IE8和the rest of the world

安装

下载最新版本：https://github.com/jacoborus/nanobar/archive/master.zip

通过安装包管理器安装：

Bower:

$bower install nanobar

npm:

$npm install nanobar

使用

在项目中引入nanobar.js即可。

进度创建

varnanobar=newNanobar(options);

参数

bg ：（可选）CSS背景颜色属性，默认为”#000″即黑色。

id ：（可选）nanobar的div的id

target ：设置防止进度条HTML代码的位置，若target为空则会固定到document的顶部位置。

进度运动
nanobar.go(percentage)：调整进度

percentage ：nonabar的百分比，取值为0-100

例子

varoptions={

    bg:'#acf',

    // leave target blank for global nanobar

    target:document.getElementById('myDivId'),

    // id for new nanobar

    id:'mynano'

};

 

varnanobar=newNanobar(options);

 

//move bar

nanobar.go(30);// size bar 30%

 

// Finish progress bar

nanobar.go(100);

Bootstrap进度条组件

CSS样式：http://v3.bootcss.com/components/#progress-animated