https://github.com/jairoblatt/vue3-radial-progress

🐋 A smart and lightweight radial progress component for Vue 3.
https://github.com/jairoblatt/vue3-radial-progress

component javascript lib progress-bar radial-gradient svg-animations typescript vue3

Last synced: 3 months ago
JSON representation

🐋 A smart and lightweight radial progress component for Vue 3.

• Host: GitHub
• URL: https://github.com/jairoblatt/vue3-radial-progress
• Owner: jairoblatt
• License: mit
• Created: 2021-11-12T16:48:04.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-10-03T23:41:14.000Z (over 2 years ago)
• Last Synced: 2024-09-18T11:19:11.484Z (4 months ago)
• Topics: component, javascript, lib, progress-bar, radial-gradient, svg-animations, typescript, vue3
• Language: Vue
• Homepage: vue3-radial-progress.vercel.app
• Size: 542 KB
• Stars: 25
• Watchers: 5
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• trackawesomelist - vue3-radial-progress (⭐25) - Radial progress bar component for Vue 3 (Recently Updated / [Oct 14, 2024](/content/2024/10/14/README.md))

README

        




  



  

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

  




>[The original project](https://github.com/wyzantinc/vue-radial-progress) only works with Vue 1 and 2, so I decided to rewrite it for Vue 3.

### [Live Demo](https://vue3-radial-progress.vercel.app/)

## 🚚 Install

```d

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

```

## 🚀 Usage

### Global

```javascript

import { createApp } from 'vue';

import RadialProgress from "vue3-radial-progress";

const app = createApp(App); 

app.use(RadialProgress);

```

### Local

```javascript

import RadialProgress from "vue3-radial-progress";

export default {

  components: {

    RadialProgress

  },

};

```

## 📌 Examples

```html

  

    

  

import { ref, defineComponent } from "vue";

export default defineComponent({

    setup(){

      const completedSteps = ref(0);

      const totalSteps = ref(10);

      return {

            completedSteps,

            totalSteps

        }

    }

})

```

### 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](https://github.com/jairoblatt/vue3-radial-progress/blob/master/LICENSE)