radial-progress-vue3 v0.0.3

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/vue@3.0.0"></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