vue-circular-progress is a small Vue.js component for drawing animated circular progress bars with or without percentage text.
animated circular progress bar, circular progress bar react native, circular progress bar with percentage, circular progress bar javascript
How to make use of it:
Install
// For Vue.js 2.0+ npm install vue2-circle-progress
Usage
<template>
<div id="app">
<p>
A Vue.js component to draw animated circular progress bars!
</p>
<vue-circle
:progress="50"
:size="100"
:reverse="false"
line-cap="round"
:fill="fill"
empty-fill="rgba(0, 0, 0, .1)"
:animation-start-value="0.0"
:start-angle="0"
insert-mode="append"
:thickness="5"
:show-percent="true"
@vue-circle-progress="progress"
@vue-circle-end="progress_end">
<p>Slot!</p>
</vue-circle>
</div>
</template><script>
import VueCircle from 'vue2-circle-progress'
export default {
components: {
VueCircle
},
data(){
return{
fill : { gradient: ["red", "green", "blue"] },
}
},
methods:{
progress(event,progress,stepValue){
console.log(stepValue);
},
progress_end(event){
console.log("Circle progress end");
}
}
}
</script>Events
Events are emitted by the component to the parent.
| Event Name | Description |
|---|---|
| vue-circle-init(event) | This event is emitted after the circle is initialized |
| vue-circle-progress(event,progress,stepValue) | This event is emitted on every progress step |
| vue-circle-end(event) | This event is emitted after completing the progress |
Methods
Methods you can call on the component.
| Method | Description |
|---|---|
| updateProgress(value) | It will update the component progress value and animate the change. It doesn’t redraw the widget. |
| updateFill(fill) | It will update the component fill color. |
animated circular progress bar, vue-circle-progress Plugin/Github
See Demo And Download
Official Website(vrajroham): Click Here
This superior jQuery/javascript plugin is developed by vrajroham. For extra advanced usage, please go to the official website.
