customizable circle progressbar with slot for vue3
highly customizable circle progressbar for vue 3
if you want to use the same component in vue 2 project, go to vue2-circle-progressbar.
npm install @lastsecond/vue3-circle-progressbar.yarn: yarn add @lastsecond/vue3-circle-progressbar.
add the component and its style to vue instance in main.js.
``js
import { createApp } from 'vue';
import App from './App.vue';
import CircleProgressbar from '@lastsecond/vue3-circle-progressbar';
import '@lastsecond/vue3-circle-progressbar/style.css';
const app = createApp(App);
app.use(CircleProgressbar);
app.mount('#app');
`
now circle progressbar can be used as a component in the vue template.
`vue
my circle progressbar:
`
import the component and its style to the vue component you want to use
`vue
my circle progressbar:
`
| prop | type | default | description |
| ----------------- | --------- | ------------- | --------------------------------------------- |
| value | Number | 0 | value should be a number between 0 to 100 |String
| stroke-color | | 'lightgrey' | color of empty progressbar |String
| progress-color | | '#FE7A67' | color of progressbar |String
| background-color | | 'white' | circle background color |Number
| stroke-width | | 20 | progressbar width |Number
| container-width | | 200 | svg viewbox size |Boolean
| show-default-text | | false | show {value}% in center of default template |
| slot | description |
| ------- | ------------------------------------------- |
| default | place of this slot is inside of progressbar |
`vue``
stroke-color="#f00"
progress-color="yellow"
background-color="#000"
:stroke-width="10"
:container-width="100"
>
this text is inside of svg