Press "Enter" to skip to content

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, circular progress bar svg, svg path progress bar, bootstrap circular progress bar with percentage

How to make use of it:

Install and download:

$ npm install vuejs-progress-bar --save

1. Import the vuejs progress bar.

import ProgressBar from 'vuejs-progress-bar'

2. Register the component.


3. Insert the progress bar component into your template.

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

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

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.