vue-radial-progress 
A radial progress bar component for Vue.js. Uses SVG and javascript to animate a radial progress bar with a gradient.
Requirements
- 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.
Installation
$ npm install --save vue-radial-progressUsage
<template> <radial-progress-bar :diameter="200" :completed-steps="completedSteps" :total-steps="totalSteps"> <p>Total steps: {{ totalSteps }}</p> <p>Completed steps: {{ completedSteps }}</p> </radial-progress-bar> </template> <script> import RadialProgressBar from 'vue-radial-progress' export default { data () { return { completedSteps: 0, totalSteps: 10 } }, components: { RadialProgressBar } } </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. |
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. |
Lint
npm run lint
Dev
npm run dev
