ProgressBar for vue.js

vuejs-progress-bar

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

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

Download Details:

Author: larsmars

Demo: https://softwarefun.no/

Source Code: https://github.com/larsmars/vuejs-progress-bar

#vue #vuejs #javascript