1.1.1 • Published 3 years ago

vue3-radial-progress v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

NametypeDefaultdescription
diameternumber200Sets width/diameter of the inner stroke.
totalStepsnumber10Sets the total steps/progress to the end.
completedStepsnumber0Sets the current progress of the inner stroke.
startColorstring'#00C58E'Sets the start color of the inner stroke (gradient).
stopColorstring'#00E0A1'Sets the end color of the inner stroke (gradient).
innerStrokeColorstring'#2F495E'Sets the color of the inner stroke to be applied to the shape.
strokeWidthnumber10Sets the width of the stroke to be applied to the shape. see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width
innerStrokeWidthnumber10Sets the width of the inner stroke to be applied to the shape.
strokeLinecapstring'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
animateSpeednumber1000Sets how long the animation should take to complete one cycle. see: https://www.w3schools.com/cssref/css3_pr_animation-duration.asp
fpsnumber60Sets the frames per seconds to update inner stroke animation.
timingFuncstring'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
isClockwisebooleantrueSets the inner stroke direction.

Slots

NameDescription
defaultSets the default slot inner the radial progress

🔖 License

MIT