Creative SVG Progress Indicator - vuejs-progress-bar

Install & Download:

# NPM
$ npm install vuejs-progress-bar --save

Description:

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'
}