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