Skip to content

jairoblatt/vue3-radial-progress

Repository files navigation

Demo

MIT npm version Vulnerabilities

A smart and light radial progress bar component for Vue 3.


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

🚚 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