A Vue.js component to generate various progress bars using SVG.
Progressbar Types:
- Battery
- Circle
- Cylinder
- Line
- Mixin
How to use it:
1. Import the vuejs-progress-bar.
import ProgressBar from 'vuejs-progress-bar'
2. Register the component.
Vue.use(ProgressBar)
3. Insert the progress bar component into your template.
<progress-bar :options="options" :value="25" />
4. Possible options to customize the progress bar.
text: {
color: '#FFFFFF',
shadowEnable: true,
shadowColor: '#000000',
fontSize: 14,
fontFamily: 'Helvetica',
dynamicPosition: false,
hideText: false
},
progress: {
color: '#2dbd2d',
backgroundColor: '#333333'
},
layout: {
height: 36,
width: 140,
verticalTextAlign: 61,
horizontalTextAlign: 43,
zeroOffset: 0,
strokeWidth: 30,
progressPadding: 10,
type: 'line'
}
Preview:
Changelog:
04/15/2021
- v1.2.7: Make circle start on top not 90 deg of
11/29/2020
- v1.2.4
11/01/2020
- Fixed: class name conflict and security vulnerabilities
08/22/2020
- Fix security vulnerabilities
Download Details:
Author: larsmars
Live Demo: https://softwarefun.no/#/progressbar
Download Link: https://github.com/larsmars/vuejs-progress-bar/archive/master.zip
Official Website: https://github.com/larsmars/vuejs-progress-bar
Install & Download:
# NPM
$ npm install vuejs-progress-bar --save