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

npm install radial-progress-vue3

You can register it globally like this:

import { createApp } from "vue";
import App from "./App.vue";
import radialProgessVue3 from "radial-progress-vue3";

const app = createApp(App);

app.component("radial-progress-vue3", radialProgessVue3);

Alternatively, you can register it locally:

<!-- your-component.vue -->

<template>
  <radial-progress-vue3
    :percent="50"
    :stroke-width="10"
    :stroke-color="'#ff0000'"
    :fill-color="'#00ff00'"
  ></radial-progress-vue3>
</template>

<script>
import { defineComponent } from "vue";

import radialProgessVue3 from "radial-progress-vue3";

export default defineComponent({
  components: {
    radialProgessVue3,
  },
});
</script>

Browser with cdn

<script src="https://unpkg.com/[email protected]"></script>

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

const { createApp } = Vue;

const App = {
  // component code
};

const app = createApp(App);

app.component("radial-progress-vue3", radialProgessVue3);
app.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 |