A radial progress bar component for Vue.js. Uses SVG and javascript to animate a radial progress bar with a gradient.
- 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 i --save medzhidov/vue-radial-progress
<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>
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. |
showInnerContent |
true | Show inner container with text |
containerNoSize |
false | Removes container's with and height |
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