vuejs-progress-bar

ProgressBar for vue.js
SVG/Vector based
4 modes: Line, Circle, Cylinder and Battery
v1.2.8

Live demo

Do you have questions or want a new feature? Use the "Issues" section 👈

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