Skip to content
Radial progress bar component for Vue.js
Branch: master
Clone or download
jrenton Merge pull request #11 from baezor/master
Updated .babelrc preset
Latest commit 2260f18 Apr 24, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist make radial gradients unique to each component Mar 10, 2017
src make radial gradients unique to each component Mar 10, 2017
.babelrc Updated .babelrc preset Mar 5, 2018
.eslintignore code cleanup Jan 29, 2017
.gitignore update for vue 2.0 Jan 24, 2017
LICENSE code cleanup Jan 29, 2017 fix func name Jan 29, 2017
package.json make radial gradients unique to each component Mar 10, 2017
webpack.config.js add timing function prop Jan 29, 2017

vue-radial-progress npm package

A radial progress bar component for Vue.js. Uses SVG and javascript to animate a radial progress bar with a gradient.

Live Demo


  • Vue.js ^1.0.0 (Compatible with Vue 1.0 or 2.0)
  • A module bundler such as webpack or use the minified version on its own.


$ npm install --save vue-radial-progress


  <radial-progress-bar :diameter="200"
   <p>Total steps: {{ totalSteps }}</p>
   <p>Completed steps: {{ completedSteps }}</p>

import RadialProgressBar from 'vue-radial-progress'

export default {
  data () {
    return {
      completedSteps: 0,
      totalSteps: 10

  components: {


Name Default value Description
diameter 200 Diameter of the progress bar circle in pixels.
totalSteps 10 Total number of steps to complete progress bar.
completedSteps 0 Number of completed steps in the progress bar.
startColor #bbff42 The color of the leading edge of the progress bar gradient.
stopColor #429321 The secondary color of the progress bar gradient.
innerStrokeColor #323232 Background color of the progress bar.
strokeWidth 10 The width of the progress bar.
animateSpeed 1000 The amount of time in milliseconds to animate one step.
fps 60 The frames per second that the animation should run.
timingFunc linear The transition timing function to use for the CSS transition. See transition-timing-function.


npm run lint


npm run dev


The MIT License

You can’t perform that action at this time.