• Stars
    star
    1,458
  • Rank 31,368 (Top 0.7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A lightweight progress bar for vue

vue-progressbar

Table of Contents

Demo

Demo

Requirements

Installation

# npm
$ npm install vue-progressbar

#yarn
$ yarn add vue-progressbar

Usage

main.js

import Vue from 'vue'
import VueProgressBar from 'vue-progressbar'
import App from './App'

const options = {
  color: '#bffaf3',
  failedColor: '#874b4b',
  thickness: '5px',
  transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
  },
  autoRevert: true,
  location: 'left',
  inverse: false
}

Vue.use(VueProgressBar, options)

new Vue({
  ...App
}).$mount('#app')

Constructor Options

key description default options
color color of the progress bar 'rgb(143, 255, 199)' RGB HEX HSL HSV VEC
failedColor color of the progress bar upon load fail 'red' RGB, HEX, HSL, HSV, VEC
thickness thickness of the progress bar '2px' px, em, pt, %, vh, vw
transition transition speed/opacity/termination of the progress bar {speed: '0.2s', opacity: '0.6s', termination: 300} speed, opacity, termination
autoRevert will temporary color changes automatically revert upon completion or fail true true, false
location change the location of the progress bar top left, right, top, bottom
position change the position of the progress bar fixed relative, absolute, fixed
inverse inverse the direction of the progress bar false true, false
autoFinish allow the progress bar to finish automatically when it is close to 100% true true, false

Implementation

App.vue

<template>
    <div id="app">
        <!-- for example router view -->
        <router-view></router-view>
        <!-- set progressbar -->
        <vue-progress-bar></vue-progress-bar>
    </div>
</template>

<script>
export default {
  mounted () {
    //  [App.vue specific] When App.vue is finish loading finish the progress bar
    this.$Progress.finish()
  },
  created () {
    //  [App.vue specific] When App.vue is first loaded start the progress bar
    this.$Progress.start()
    //  hook the progress bar to start before we move router-view
    this.$router.beforeEach((to, from, next) => {
      //  does the page we want to go to have a meta.progress object
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        // parse meta tags
        this.$Progress.parseMeta(meta)
      }
      //  start the progress bar
      this.$Progress.start()
      //  continue to next page
      next()
    })
    //  hook the progress bar to finish after we've finished moving router-view
    this.$router.afterEach((to, from) => {
      //  finish the progress bar
      this.$Progress.finish()
    })
  }
}
</script>

vue-router

export default [
  {
    path: '/achievement',
    name: 'achievement',
    component: './components/Achievement.vue',
    meta: {
      progress: {
        func: [
          {call: 'color', modifier: 'temp', argument: '#ffb000'},
          {call: 'fail', modifier: 'temp', argument: '#6e0000'},
          {call: 'location', modifier: 'temp', argument: 'top'},
          {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
        ]
      }
    }
  }
]

vue-router meta options

call modifier argument example
color set, temp string {call: 'color', modifier: 'temp', argument: '#ffb000'}
fail set, temp string {call: 'fail', modifier: 'temp', argument: '#ffb000'}
location set, temp string {call: 'location', modifier: 'temp', argument: 'top'}
transition set, temp object {call: 'transition', modifier: 'temp', argument: {speed: '0.6s', opacity: '0.6s', termination: 400}}

Methods

function description parameters example
start start the progress bar loading N/A this.$Progress.start()
finish finish the progress bar loading N/A this.$Progress.finish()
fail cause the progress bar to end and fail N/A this.$Progress.fail()
increase increase the progress bar by a certain % number: integer this.$Progress.increase(number)
decrease decrease the progress bar by a certain % number: integer this.$Progress.decrease(number)
set set the progress bar % number: integer this.$Progress.set(number)
setFailColor cause the fail color to permanently change color: string this.$Progress.setFailColor(color)
setColor cause the progress color to permanently change color: string this.$Progress.setColor(color)
setLocation cause the progress bar location to permanently change location: string this.$Progress.setLocation(location)
setTransition cause the progress bar transition speed/opacity/termination to permanently change transition: object this.$Progress.setTransition(transition)
tempFailColor cause the fail color to change (temporarily) color: string this.$Progress.tempFailColor(color)
tempColor cause the progress color to change (temporarily) color: string this.$Progress.tempColor(color)
tempLocation cause the progress bar location to change (temporarily) location: string this.$Progress.tempLocation(location)
tempTransition cause the progress bar location to change (temporarily) transition: object this.$Progress.tempTransition(transition)
revertColor cause the temporarily set progress color to revert back to it's previous color N/A this.$Progress.revertColor()
revertFailColor cause the temporarily set fail color to revert back to it's previous color N/A this.$Progress.revertFailColor()
revertTransition cause the temporarily set transition to revert back to it's previous state N/A this.$Progress.revertTransition()
revert cause the temporarily set progress and/or fail color to their previous colors N/A this.$Progress.revert()
parseMeta parses progress meta data meta: object this.$Progress.parseMeta(meta)

Examples

Loading Data (vue-resource)

<script>
export default {
  methods: {
    test () {
      this.$Progress.start()
      this.$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz28mqf6vz')
      .then((response) => {
          this.$Progress.finish()
      }, (response) => {
          this.$Progress.fail()
      })
    }
  }
}
</script>

Accessing the progress bar externally through the vue instance (e.g. axios interceptors)

main.js

// main.js from Usage section

Vue.use(VueProgressBar, options)

export default new Vue({ // export the Vue instance
  ...App
}).$mount('#app')

api-axios.js

import axios from 'axios';
import app from '../main'; // import the instance

const instance = axios.create({
    baseURL: '/api'
});

instance.interceptors.request.use(config => {
    app.$Progress.start(); // for every request start the progress
    return config;
});

instance.interceptors.response.use(response => {
    app.$Progress.finish(); // finish when a response is received
    return response;
});

export default instance; // export axios instance to be imported in your app

License

The MIT License

More Repositories

1

vue-lazyload

A Vue.js plugin for lazyload your Image or Component in your application.
JavaScript
7,967
star
2

vue-recyclerview

Mastering Large Lists with the vue-recyclerview
JavaScript
1,451
star
3

vue-zhihu-daily

zhihu daily spa with vue 线上演示在这里 ---->
JavaScript
1,287
star
4

vue-dragging

A sortable list directive with Vue
JavaScript
765
star
5

vue-datepicker

[Deprecated] calendar and datepicker component with material design for Vue.js
Vue
703
star
6

vue-video

A HTML5 video player component for Vue.js
Vue
328
star
7

vue-ssr-hmr-template

Interesting! Vue2 + Webpack2 + HMR + Server Side Render + Express template see demo->
JavaScript
226
star
8

vue-mobile-qq

一个长得像QQ的demo
Vue
221
star
9

vue-vueRouter-webpack-example

a vue webpack example
CSS
212
star
10

vue-slide

A lightweight slide component for vue
JavaScript
208
star
11

weapp-gold

微信小程序的掘金信息流
JavaScript
169
star
12

Qarticles

A lightweight and high performance JavaScript library for creating physical particles
JavaScript
136
star
13

vue-ssr

Use Vue 2.0 Server Side Rendering with Express
JavaScript
93
star
14

zhihu-beautify

beautify your zhihu
CSS
85
star
15

vue-material-blog

a simple blog make by Vue and Material-design-lite
Vue
65
star
16

safari-reaper-demo

HTML
33
star
17

weex-demo

掘金weex版demo
JavaScript
26
star
18

AweSiteChat

A horrible site danmu project base on Vue.js & Wilddog
Vue
21
star
19

vue-audio

A audio player for vue.js
Vue
16
star
20

cov-xss

xss
Vue
9
star
21

cov_localStorageORM

javascript ORM base on Localstorage
JavaScript
8
star
22

CovBookkeeper

vue+echart+express实现的记账web app
JavaScript
4
star
23

weapp-shop

O2O 电商微信小程序
JavaScript
4
star
24

vue-recyclerview-example

vue-recyclerview example
JavaScript
3
star
25

gold-card

nothing here
JavaScript
3
star
26

hatest

A node API testing tool similar to Supertest, based on Axios.
JavaScript
2
star
27

sync-console-server

real time remote debug tool server side
JavaScript
2
star
28

sync-console

realtime remote sync console
JavaScript
2
star
29

koa-server-arm

JavaScript
2
star
30

want-to-eat

使用vue.js做的一个简单material design风格小web app
JavaScript
2
star
31

vue-lazyload-run

vue-lazyload dev
JavaScript
2
star
32

wazi

amaziUI+ajax+PHP online shop
CSS
1
star
33

v8-RuntimeFunctions-list

V8 RuntimeFunctions list
1
star
34

css-rewrite-webpack-plugin

A Webpack plugin to rewrite CSS assets.
JavaScript
1
star
35

cov-rate-limit

A lightweight Rate limiter middleware for Express and Koa. Use to limit repeated requests to public APIs.
JavaScript
1
star
36

xss-demo

xss-demo
Vue
1
star
37

vue-ssr-demo

1
star