SVG/Vector based VueJs Progressbar

In this post I am going to share simple vuejs progress bar component that progressbar made on svg/vector method. You can use these dynamic vue progress bar on your vue application to display progressbar.



npm install vuejs-progress-bar --save

Import: (in your main.js)

import ProgressBar from 'vuejs-progress-bar'


Use: (in your local .vue file/component, html section)


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


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

See live demo and download source code.


This awesome script developed by larsmars. Visit their official repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.