A progress bar component for Vue.js
Package: vuejs-progress-bar
Created by: larsmars
Last modified: Wed, 01 Jun 2022 19:09:40 GMT
Version: 1.2.8
License: MIT
Downloads: 5,312
Repository: https://github.com/larsmars/vuejs-progress-bar
Install
npm install vuejs-progress-bar
yarn add vuejs-progress-bar
vuejs-progress-bar
ProgressBar for vue.js
SVG/Vector based
4 modes: Line, Circle, Cylinder and Battery
v1.2.8
Do you have questions or want a new feature? Use the "Issues" section :point_left:
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:
1. Compile and build for production
npm run build
2. check into git
git add .
git commit -m "Message.."
3. 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
