radial-progress-vue3

A simple, highly customizable, and easy to use radial progress bar.

Features

• can be clockwise or counter-clockwise
• colors can be customized

Installation and usage

---

1npm install radial-progress-vue3

You can register it globally like this:

1import { createApp } from "vue";
2import App from "./App.vue";
3import radialProgessVue3 from "radial-progress-vue3";
4
5const app = createApp(App);
6
7app.component("radial-progress-vue3", radialProgessVue3);

Alternatively, you can register it locally:

1<!-- your-component.vue -->
2
3<template>
4  <radial-progress-vue3
5    :percent="50"
6    :stroke-width="10"
7    :stroke-color="'#ff0000'"
8    :fill-color="'#00ff00'"
9  ></radial-progress-vue3>
10</template>
11
12<script>
13import { defineComponent } from "vue";
14
15import radialProgessVue3 from "radial-progress-vue3";
16
17export default defineComponent({
18  components: {
19    radialProgessVue3,
20  },
21});
22</script>

Browser with cdn

1<script src="https://unpkg.com/vue@3.0.0"></script>
2
3<script src="https://unpkg.com/radial-progress-vue3@latest/dist/radial-progress-vue3.min.js"></script>

1const { createApp } = Vue;
2
3const App = {
4  // component code
5};
6
7const app = createApp(App);
8
9app.component("radial-progress-vue3", radialProgessVue3);
10app.mount("#app");

You can customize the component by passing the following props:

Props

Prop	Description	Type	Default
percent	This is the percentage of the progress	Number	42
width	The width & height of the viewBox	Number	80
strokeWidth	This is the width of the stroke (like a border)	Number	6
strokeColor	This is the color of the stroke (can be rgb, hsl, hex, rgba)	String	#2e5090
innerStrokeColor	This is the color of the innerStroke (can be rgb, hsl, hex, rgba)	String	#ffaadd
fillColor	This is the background color of the component (can be rgb, hsl, hex, rgba)	String	#E6E6FA
roundedStroke	This determines if the stroke has rounded edges or flat edges	Boolean	false
showText	This determines whether to show the progress in a text	Boolean	true
textColor	Color of the text (if showText is true), (can be rgb, hsl, hex, rgba)	String	#222222
fontWeight	font weight of the text (if showText is true)	String Or Number	700
fontSize	font size of the text (if showText is true) , it is in pixels	Number	12
showPercentSymbol	This determines if % is show in the text	Boolean	true
clockWise	This determines if the progress is clockwise or counter-clockwise	Boolean	true