vue-progressbar
Table of Contents
Demo
- Demo (updated)
- Demo (forked from)
- Trailing progress bar + randomizer
- Vue-router meta progress bar
- Multi progress bar support
- Gradient support
Requirements
- Vue.js
1.x
or2.x
Installation
# npm $ npm install vue-progressbar-xeonpowder # yarn $ yarn add vue-progressbar-xeonpowder
Build from source
# git
cd /directory/to/clone/to
git clone https://github.com/XeonPowder/vue-progressbar.git
cd /directory/cloned/to
# npm or yarn
npm install | yarn install
# build with npm or yarn
[npm|yarn] run build
Usage
main.js
const options = debug: true color: '#bffaf3' failedColor: '#874b4b' thickness: '5px' transition: time: '0.7s' opacity: '1.6s' trail: '-1px' autoRevert: true location: 'top' inverse: false gradient: use: true gradient: 'predefined' init: true bounce: true Vue ...App
Constructor Options
key | description | defualt | options |
---|---|---|---|
autoRevert |
will temporary color changes automatically revert upon completion or fail | true |
true , false |
color |
color of the progress bar | 'rgb(19, 91, 55)' |
RGB , HEX |
debug |
output console errors | false |
true , false |
failedColor |
color of the progress bar upon load fail | 'red' |
RGB , HEX |
inverse |
inverse the direction of the progress bar | false |
true , false |
location |
change the location of the progress bar | top |
left , right , top , bottom |
thickness |
thickness of the progress bar | '2px' |
px , em , pt , % , vh , vw |
transition |
transition speed/opacity of the progress bar | {time: '0.2s', opacity: '0.6s'} |
s , ms |
trail |
change the type of progress bar, trailing or not | '-1px' |
px |
bounce |
change the bounce type of the progress bar | false |
true , false |
gradient |
should the progress bar use a gradient | {use: false, gradient: 'predefined'} |
use: [true , false ], gradient: ['predefined' , '-linear-gradient(to [top, left], [RGB, HEX], [RGB, HEX]' ] |
init |
when a progress bar is created should it be initialized with data | true |
true , false |
Implementation
App.vue
<!-- for example router view --> <!-- setup progressbar --> <!-- automatically added to $pb --> <!-- required: show - should the progress bar be able to be displayed --> <!-- required: reference - name of this specific progress bar --> <!-- optional: options - can be passed custom constructor options -->
vue-router
path: '/achievement' name: 'achievement' component: './components/Achievement.vue' meta: progress: func: call: 'color' modifier: 'temp' argument: '#7000ff' call: 'fail' modifier: 'temp' argument: '#6e0000' call: 'location' modifier: 'temp' argument: 'top' call: 'transition' modifier: 'temp' argument: time: '2.0s' opacity: '0.6s' call: 'inverse' modifier: 'temp' argument: true call: 'thickness' modifier: 'temp' argument: '10px' call: 'trail' modifier: 'temp' argument: '50px' call: 'bounce' modifier: 'temp' argument: false call: 'gradient' modifier: 'temp' argument: use: true gradient: 'predefined'
vue-router meta/modify 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'} |
inverse | set , temp |
boolean |
{call: 'inverse', modifier: 'temp', argument: true} |
location | set , temp |
string |
{call: 'location', modifier: 'temp', argument: 'top'} |
thickness | set , temp |
string |
{call: 'thickness', modifier: 'temp', argument: '10px'} |
transition | set , temp |
object |
{call: 'transition', modifier: 'temp', argument: {time: '0.6s', opacity: '0.6s'}} |
trail | set , temp |
string |
{call: 'trail', modifier: 'temp', argument: '100px'} |
bounce | set , temp |
boolean |
{call: 'bounce', modifier: 'temp', argument: false } |
gradient | set , temp |
object |
{call: 'gradient', modifier: 'temp', argument: {use: true, gradient: 'linear-gradient(to left, #ffffff, #000000)'}} |
Methods
function | description | parameters | example | return |
---|---|---|---|---|
init | link bar with data (automaticallly in $pb.create() if init = true in constructor options) |
name |
this.$pb.init('router')| N/A` |
|
start | start a progress bar | name , (options) , (modifier) |
this.$pb.start('router') |
N/A |
finish | finish a progress bar | name |
this.$pb.finish('router') |
N/A |
fail | fail a progress bar | name |
this.$pb.fail('router') |
N/A |
create | craete a progress bar | (name) , (options) |
this.$pb.create('test') |
N/A |
quickHide | quickly hide a progress bar (automatically in $pb.start() ) |
name |
let bQuicklyHidden = this.$pb.quickHide('router') |
boolean |
randomize | randomize a progress bar | name , (meta) |
this.$pb.randomize('router') |
N/A |
destroy | remove a progress bar from memory | name |
let bDestroyed = this.$pb.destroy('test') |
boolean |
progress | increase the progression # of a progress bar (automatically called in $pb.start() ) |
name , (options) |
this.$pb.progress('test') |
N/A |
modify | modify a property/properties of a progress bar | name , meta |
this.$pb.modify('router', {call: 'color', modifier: 'temp', argument: '#f0f0f0'}) |
N/A |
Examples
vue-resource
License
This project uses an open-source MIT License