vue2-progress

基于Vue 2.0 的页面加载进度条.

Vue.use(VueProgress); // 注册实例
 
let instance = this.$vueProgress(); // 初始化vueProgress
 
instance.start(); // 开始显示
 
setTimeout(function () {
    instance.done(); // 结束
}, 3000);

• Description
• Installation
  • Yarn
  • NPM
• Usage
• Configuration
• Examples

description

这是一种类似于Google, YouTube的ajax加载进度条插件，基于vue 2.0版本之上，可以自定义插件样式和效果。

Installation

Yarn

$ yarn add vue-progress

NPM

$ npm install vue-progress --save

Usage

1. 注册

import Vue from 'vue'
import VueProgress from 'vue-progress'
 
Vue.use(VueProgress)

2. 快速使用

let instance = this.$vueProgress(); // 初始化vueProgress
 
instance.start(); // 开始显示
instance.done(); // 结束

3. 设置初始进度

instance.set(0.0);     // Sorta same as .start()
instance.set(0.4);
instance.set(1.0);     // Sorta same as .done()

Configuration

初始化vueProgress 的时候，可以选择性传入参数进行控制

color

设置进度条颜色，默认是 blue

this.$vueProgress({color: '#ddd'});

speed

控制进度条速度，默认是 5

this.$vueProgress({speed: 10});

percentNum

进度条每一步的跨度，取值0-1之前的小数。默认是0-1之间的随机数

this.$vueProgress({percentNum: 0.1});

easing

右侧loading图标动画的贝塞尔曲线，默认 'linear'

this.$vueProgress({easing: 'ease'});

showSpinner

是否展示右侧loading动画，默认 true

this.$vueProgress({showSpinner: false});

Examples

To run the examples; clone this repository & run npm install in the root directory, and then run npm run dev. Head to http://localhost:8080.