v-Circle is a multipurpose Vue.js component for displaying circular progress bars using SVG, canvas, or pure CSS.
vue progress bar, vue 3 circular progress bar, circular progressbar, vue progress circle, circular progress bar with percentage, dynamic progress bar in vue js, vue progress bar percentage
Circles
- CssCircles
- SvgCircles
- CanvasCircles
How to make use of it:
Install & Download:
$ npm install v-circle
Usage
<template> <circle-css color="#3498db" width=120 font-size=48 pv=12 bold=8 text-bg-color='#f0f0f0'></circle-css> </template>
<script>
import CssCircle from 'v-circle/components/css-circle.vue'
export default {
components: {
circleCss: CssCircle
}
}
</script>API
CssCircles
| prop | type | description | example | default value |
|---|---|---|---|---|
| color | String | circle progress fill color | #000000 | #2ecc71 |
| width | Number | circle size | 180 | 150 |
| fontSize | Number | circle progress value size | 64 | 64 |
| pv | Number | circle progress value | 75 | 0 |
| textColor | String | circle progress value color | #bdc3c7 | #bdc3c7 |
| bold | String | circle progress outline width | 10 | 5 |
| textBgColor | String | circle progress value background-color | #000000 | #f9f9f9 |
| borderColor | String | circle progress outline color | #000000 | #bdc3c7 |
| during | Number | circle progress animation dur-time | 2 | 0.8 |
| bgColor | String | circle progress background-color | #000000 | #f0f0f0 |
circle progressbar component for vue js, v-circle Plugin/Github
See Demo And Download
Official Website(qddegtya): Click Here
This superior jQuery/javascript plugin is developed by qddegtya. For extra advanced usage, please go to the official website.
