Creative SVG Progress Bar With Percentage In Vue.js

Progress Bar is a Vue.js component for creating various progress bars using SVG.

svg progress bar circle, svg horizontal progress bar, svg percentage circle, svg path progress bar, bootstrap circular progress bar with percentage

How to make use of it:

Install and download:

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

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

Properties

NameTypeDefaultDescription
valueNumber0Value of progressbar %
colorString#FFFFFFText Color
shadowEnableStringtrueText shadow enable
shadowColorString#000000Text shadow color
hideTextBooleanfalseHide text (%)
fontSizeString14pxThe font size of % text
fontFamilyStringHelveticaFont family text
dynamicPositionBooleanfalseProgress text % follow progress bar
colorString#2dbd2dProgress color, use hex or RGB
backgroundColorString#C0C0C0For background color, use hex or RGB
invertedBooleanfalseInvert circle progress
widthNumber140Width
heightNumber35Height, use stroke for progress height
verticalTextAlignNumber61Positioning of % text vertical
horizontalTextAlignNumber43Positioning of % text horizontal
zeroOffsetNumber0Offset for zero (0%) for the line progress bar
strokeWidthNumber30Width of the background of progress
progressPaddingNumber0Padding between background and progress bar (line only)
typeStringlinetype of progress bar: linecirclecylinder, or battery

Creative SVG Progress Indicator, vuejs progress bar Plugin/Github, circular progress bar generator online, circular progress bar svg


See Demo And Download

Official Website(larsmars): Click Here

This superior jQuery/javascript plugin is developed by larsmars. For extra advanced usage, please go to the official website.

Share