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

男娘i 2022-05-21 23:08 548阅读 0赞

## 前言 ##

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

## 官网 ##

NProgress.js：[http://ricostacruz.com/nprogress/][http_ricostacruz.com_nprogress]

nanobar.js：[http://nanobar.micronube.com/][http_nanobar.micronube.com]

## （1）NProgress ##

![这里写图片描述][70]

## 简介 ##

轻量级的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()，使进度条满格，即使它没有被显示。

NProgressN .done(true);

## 配置 ##

minimum：设置最低百分比

NProgress.configure({ minimum: 0.1 });

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

NProgress.configure({ template: "<div class='....'>...</div>" });

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

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

## 更多用法 ##

[https://github.com/rstacruz/nprogress][https_github.com_rstacruz_nprogress]

## .nanobar ##

![这里写图片描述][70 1]

## 简介 ##

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

兼容性：IE8和the rest of the world

## 安装 ##

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

通过安装包管理器安装：

Bower:

$ bower install nanobar

npm:

$$ npm install nanobar

## 使用 ##

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

<<script src="path/to/nanobar.js"></script>

## 进度的创建 ##

var nanobar = new Nanobar( options );

## 参数 ##

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

## 进度运动 ##

nanobar.go(percentage)：调整进度

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

## 例子 ##

var options = {
        bg: '#acf',
        // leave target blank for global nanobar
        target: document.getElementById('myDivId'),
        // id for new nanobar
        id: 'mynano'
    };
    
    var nanobar = new Nanobar( options );
    
    //move bar
    nanobar.go( 30 ); // size bar 30%
    
    // Finish progress bar
    nanobar.go(100);

## Bootstrap进度条组件 ##

CSS样式：[http://v3.bootcss.com/components/\#progress-animated][http_v3.bootcss.com_components_progress-animated]

本文转载来自：[http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html][http_www.xuanfengge.com_front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html]

[http_ricostacruz.com_nprogress]: http://ricostacruz.com/nprogress/
[http_nanobar.micronube.com]: http://nanobar.micronube.com/
[70]: /images/20220522/fb7c43c652264305b41a4f863b3b2b6c.png
[https_github.com_rstacruz_nprogress]: https://github.com/rstacruz/nprogress
[70 1]: /images/20220522/97819484d5ea482ea79b3a084945592b.png
[https_github.com_jacoborus_nanobar_archive_master.zip]: https://github.com/jacoborus/nanobar/archive/master.zip
[http_v3.bootcss.com_components_progress-animated]: http://v3.bootcss.com/components/#progress-animated
[http_www.xuanfengge.com_front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html]: http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html