if you want to use ProgressBar using vue.js SVG/Vector based 4 modes: Line, Circle, Cylinder and Battery then use this component in your Vue.js

There are following steps to use Vue.js progressbar
Setup
install:
npm install vuejs-progress-bar --save
Import: (in your main.js)
import ProgressBar from 'vuejs-progress-bar' Vue.use(ProgressBar)
Usage
Use: (in your local .vue file/component, html section)
<progress-bar :options="options" :value="value" /> <!-- Options struct: --> options: { text: { color: '#FFFFFF', shadowEnable: true, shadowColor: '#000000', fontSize: 14, fontFamily: 'Helvetica', dynamicPosition: false, hideText: false }, progress: { color: '#2dbd2d', backgroundColor: '#333333', inverted: false }, layout: { height: 35, width: 140, verticalTextAlign: 61, horizontalTextAlign: 43, zeroOffset: 0, strokeWidth: 30, progressPadding: 0, type: 'line' } }
Properties
Name | Type | Default | Description |
---|---|---|---|
value | Number | 0 | Value of progressbar % |
color | String | #FFFFFF | Text color |
shadowEnable | String | true | Text shadow enable |
shadowColor | String | #000000 | Text shadow color |
hideText | Boolean | false | Hide text (%) |
fontSize | String | 14px | Font size of % text |
fontFamily | String | Helvetica | Font family text |
dynamicPosition | Boolean | false | Progress text % follow progress bar |
color | String | #2dbd2d | Progress color, use hex or rgb |
backgroundColor | String | #C0C0C0 | Background color, use hex or rgb |
inverted | Boolean | false | Invert circle progress |
width | Number | 140 | Width |
height | Number | 35 | Height, use strok for progress height |
verticalTextAlign | Number | 61 | Positioning of % text vertical |
horizontalTextAlign | Number | 43 | Positioning of % text horizontal |
zeroOffset | Number | 0 | Offset for zero (0%) for line progress bar |
strokeWidth | Number | 30 | Width of background of progress |
progressPadding | Number | 0 | Padding between background and progress bar (line only) |
type | String | line | type of progress bar: line, circle, cylinder or battery |
Update package:
- Compile and build for production
npm run build
- check into git
git add .
git commit -m "Message.."
- Publish to NPM
# Do some work...
# x.x.1 -> x.x.2
npm version patch
# x.1.0 -> x.2.0
npm version minor
# 1.0.0 -> 2.0.0
npm version major