Customizable Radial (Circular) Progress Component For Vue 3

Install & Download:

# Yarn
$ yarn add vue3-radial-progress
# NPM
$ npm i vue3-radial-progress

Description:

This is the Vue 3 version of wyzantinc’s vue-radial-progress, which enables you to generate radial progress bars with gradients and animations.

How to use it:

1. Import and register the radial progress component.

import { createApp } from 'vue';
import RadialProgress from "vue3-radial-progress";
const app = createApp(App);

// locally
export default {
  components: {
    RadialProgress
  }
}

// globally
app.use(RadialProgress);

2. Generate a basic radial progress bar.

<template>
  <radial-progress-bar 
    :diameter="200"
    :completed-steps="completedSteps"
    :total-steps="totalSteps">
   <p>Total steps: {{ totalSteps }}</p>
   <p>Completed steps: {{ completedSteps }}</p>
  </radial-progress-bar>
</template>

import { ref, defineComponent } from "vue";
export default defineComponent({
  setup(){
    const completedSteps = ref(0);
    const totalSteps = ref(10);
    return {
        completedSteps,
        totalSteps
      }
  }
})

3. Default props.

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