vue-progressbar-component
[CSS GPU Animation] Simple progressbar for vuejs
Demo
Install
npm install vue-progressbar-component
or yarn add vue-progressbar-component
Usage
The most common use case is to register the component globally.
// in your main.js or similar file Vue
Alternatively you can do this to register the components:
// HelloWorld.vue name: 'HelloWorld' components: ProgressBar
On your page you can now use html like this:
<!-- simple progress bar --> <!-- add class (color) --> <!-- change start origin from right --> <!-- change scaleX to scaleY and origin bottom -->
CSS
// example or use it ;
Do you like my theme but not the colors or paddings, ...?
// overwrite variables ;;// find more variables in /src/scss/_progressbar-variables.scss ;
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
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report# run unit testsnpm run unit# run all testsnpm test