vue-radial-progress

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

Live Demo

Requirements

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

Installation

1$ npm install --save vue-radial-progress

Usage

1<template>
2  <radial-progress-bar :diameter="200"
3                       :completed-steps="completedSteps"
4                       :total-steps="totalSteps">
5   <p>Total steps: {{ totalSteps }}</p>
6   <p>Completed steps: {{ completedSteps }}</p>
7  </radial-progress-bar>
8</template>
9
10<script>
11import RadialProgressBar from 'vue-radial-progress'
12
13export default {
14  data () {
15    return {
16      completedSteps: 0,
17      totalSteps: 10
18    }
19  },
20
21  components: {
22    RadialProgressBar
23  }
24}
25</script>

Props

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.
innerStrokeWidth	10	The width of the background/inner circle.
strokeLinecap	round	The type of stroke linecap for circle.
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.
isClockwise	true	Controls the direction of the progress bar.

Lint

npm run lint

Dev

npm run dev

License

The MIT License