vue中使用网页进度条

转载：http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html前言进度条库是前端中常见的库之一，bootstrap中提供了多种进度条样式。NProgress.js和nanobar.js是两款轻量级的进度条组件，使用简便。轩枫阁用过Nprogress，用于页面刚打开时的页面加

风儿轻丶

2775人浏览 · 2018-03-12 17:56:05

风儿轻丶 · 2018-03-12 17:56:05 发布

转载：http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html

前言

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

官网

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

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

1. NProgress

简介

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

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

安装

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

基本用法

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

   
        1
       
        2
       
        NProgress . start ( ) ;
       
        NProgress . done ( ) ;

高级用法

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

   
        1
       
        2
       
        3
       
        NProgress . set ( 0.0 ) ;       // Sorta same as .start()
       
        NProgress . set ( 0.4 ) ;
       
        NProgress . set ( 1.0 ) ;       // Sorta same as .done()

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

   
        1
       
        NProgress . inc ( ) ;

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

   
        1
       
        NProgress . done ( true ) ;

配置

minimum：设置最低百分比

   
        1
       
        NProgress . configure ( { minimum : 0.1 } ) ;

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

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

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

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

demo--》vue/

1、cnpm i nprogress --save

2、在main.js中输入：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({ease:'ease',speed:500});
router.beforeEach((to, from, next) => {
	if(to.path == '/') {
		sessionStorage.clear();
	}	
	NProgress.start();
	next()
});
router.afterEach(transition => {
	NProgress.done();
});

3、具体页面具体逻辑接口里面再调相应的nprogress接口

2. nanobar

简介

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

兼容性：IE8和the rest of the world

安装

通过安装包管理器安装：

Bower:

   
        1
       
        $ bower  install  nanobar

npm:

   
        1
       
        $ npm  install  nanobar

使用

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

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

进度创建

   
        1
       
        var nanobar = new Nanobar ( options ) ;

参数

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

id <String>：（可选）nanobar的div的id

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

进度运动

nanobar.go(percentage)：调整进度

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

例子

   
        1
       
        2
       
        3
       
        4
       
        5
       
        6
       
        7
       
        8
       
        9
       
        10
       
        11
       
        12
       
        13
       
        14
       
        15
       
        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 ) ;