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

Live Demo

🚚 Install

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

🚀 Usage

Global

1import { createApp } from 'vue';
2import RadialProgress from "vue3-radial-progress";
3
4const app = createApp(App); 
5app.use(RadialProgress);
6

Local

1import RadialProgress from "vue3-radial-progress";
2
3export default {
4  components: {
5    RadialProgress
6  },
7};

📌 Examples

1<template>
2  <RadialProgress 
3   :diameter="200"
4   :completed-steps="completedSteps"
5   :total-steps="totalSteps">
6    <!-- Your inner content here -->
7  </RadialProgress>
8</template>
9
10<script>
11import { ref, defineComponent } from "vue";
12
13export default defineComponent({
14    setup(){
15      const completedSteps = ref(0);
16      const totalSteps = ref(10);
17
18      return {
19            completedSteps,
20            totalSteps
21        }
22    }
23})
24</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