vue3-radial-progress
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.
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
Dependencies
@babel/core: ^7.14.6@babel/preset-env: ^7.14.7@babel/preset-typescript: ^7.14.5@commitlint/cli: ^14.1.0@commitlint/config-conventional: ^14.1.0@rollup/plugin-alias: ^3.1.2@rollup/plugin-babel: ^5.3.0@rollup/plugin-commonjs: ^14.0.0@rollup/plugin-node-resolve: ^9.0.0@rollup/plugin-replace: ^2.4.2@types/jest: ^27.0.2@vue/cli-plugin-babel: ^4.5.13@vue/cli-plugin-typescript: ^4.5.13@vue/cli-service: ^4.5.13@vue/compiler-sfc: ^3.0.11@vue/test-utils: ^2.0.0-rc.16@zerollup/ts-transform-paths: ^1.7.18cross-env: ^7.0.3husky: ^7.0.4jest: 27.0.0minimist: ^1.2.5postcss: ^8.2.10rimraf: ^3.0.2rollup: ^2.52.8rollup-plugin-postcss: ^4.0.0rollup-plugin-terser: ^7.0.2rollup-plugin-typescript2: ^0.30.0rollup-plugin-vue: ^6.0.0ts-jest: ^27.0.7ttypescript: ^1.5.12typescript: ^4.0.3vue: ^3.0.5vue3-jest: ^27.0.0-alpha.1