vue-progressbar-component
[CSS GPU Animation] Simple progressbar for vuejs
Demo
Demo here
Install
npm install vue-progressbar-component
or yarn add vue-progressbar-component
Usage
The most common use case is to register the component globally.
import Vue from 'vue'
import ProgressBar from 'vue-progressbar-component'
Vue.component('progress-bar', ProgressBar)
Alternatively you can do this to register the components:
import ProgressBar from 'vue-progressbar-component'
export default {
name: 'HelloWorld',
components: {
ProgressBar
}
}
On your page you can now use html like this:
<progress-bar
:value="77"
/>
<progress-bar
:value="88"
bar-class="bg-success"
/>
<progress-bar
:value="95"
origin="right"
/>
<progress-bar
:value="88"
scale="Y"
origin="bottom"
/>
CSS
@import "./node_modules/vue-progressbar-component/src/scss/progressbar";
Do you like my theme but not the colors or paddings, ...?
$progressbar-height: 2rem;
$progressbar-background: gray;
@import "./node_modules/vue-progressbar-component/src/scss/progressbar";
Props
Prop | Type | Required | Default | Description |
---|
value | Number | false | 0 | Progress bar width |
barClass | String | false | '' | Bar class |
origin | String | false | left | Set origin |
scale | String | false | X | Set scaleX or scaleY |
Build Setup
npm install
npm run dev
npm run build
npm run build --report
npm run unit
npm test