vue3-radial-progress

The original project only works with Vue 1 and 2, so I decided to rewrite it for Vue 3.

Live Demo

🚚 Install

 yarn add vue3-radial-progress  // npm install --save vue3-radial-progress

🚀 Usage

Global

import { createApp } from 'vue';
import RadialProgress from "vue3-radial-progress";

const app = createApp(App); 
app.use(RadialProgress);

Local

import RadialProgress from "vue3-radial-progress";

export default {
  components: {
    RadialProgress
  },
};

📌 Examples

<template>
  <RadialProgress 
   :diameter="200"
   :completed-steps="completedSteps"
   :total-steps="totalSteps">
    <!-- Your inner content here -->
  </RadialProgress>
</template>

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

export default defineComponent({
    setup(){
      const completedSteps = ref(0);
      const totalSteps = ref(10);

      return {
            completedSteps,
            totalSteps
        }
    }
})
</script>

Props

Slots

🔖 License

MIT