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

| Name | type | Default | description | | ------------- | ---------------- | --------- | ------------------------------------------------- | |diameter| number | 200 | Sets width/diameter of the inner stroke. |totalSteps| number |10| Sets the total steps/progress to the end. |completedSteps| number |0| Sets the current progress of the inner stroke. |startColor| string |'#00C58E'| Sets the start color of the inner stroke (gradient). |stopColor| string |'#00E0A1'| Sets the end color of the inner stroke (gradient). |innerStrokeColor| string |'#2F495E'| Sets the color of the inner stroke to be applied to the shape. |strokeWidth| number |10| Sets the width of the stroke to be applied to the shape. see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width |innerStrokeWidth| number |10| Sets the width of the inner stroke to be applied to the shape. |strokeLinecap| string |'round'| Sets the shape to be used at the end of stroked. see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap |animateSpeed| number |1000| Sets how long the animation should take to complete one cycle. see: https://www.w3schools.com/cssref/css3_pr_animation-duration.asp |fps| number |60 | Sets the frames per seconds to update inner stroke animation. |timingFunc| string |'linear'| Sets how the animation progresses through the duration of each cycle. see: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function |isClockwise| boolean |true| Sets the inner stroke direction.

Slots

| Name | Description | | ---- | -------------------------- | | default | Sets the default slot inner the radial progress |

🔖 License

MIT