Vue.js progress bar

if you want to use ProgressBar using vue.js SVG/Vector based 4 modes: Line, Circle, Cylinder and Battery then use this component in your Vue.js

Vue.js progress bar

There are following steps to use Vue.js progressbar

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

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

Update package:

  • Compile and build for production
npm run build
  • check into git
git add .
git commit -m "Message.."
  • 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

Leave a Comment