Welcome to CircleProgress!

CircleProgress - A Circular Progress Bar Component for Vue 3

Elevate your Vue 3 applications with CircleProgress, a beautifully designed and highly customizable circular progress bar component. Built with Echart for maximum performance and responsiveness, CircleProgress offers a sleek and modern way to visualize progress in any project.

Whether you're building dashboards, progress indicators, or any visual representation of data, CircleProgress gives you the flexibility to tailor every aspect to fit your design needs. With its lightweight architecture, you can effortlessly integrate it into your Vue applications without sacrificing performance.

Key Features:

• Customizable Styles: Adjust colors, sizes, and animations to match your app's theme effortlessly.

• Lightweight & Efficient: Designed to be resource-friendly while providing a stunning visual experience.

• Responsive Design: Perfectly scales to fit any screen size, ensuring a consistent look across devices.

• Easy Integration: Simple to implement and configure, making it a breeze to add to your projects.

Unlock the potential of your user interfaces with CircleProgress and make your applications not just functional, but visually captivating!

Installation

npm install --save vue-gauge-circle

Adding into app

import { CircleProgress } from "vue-gauge-circle";

<CircleProgress 
    :progressValue="70"
    :minValue="0" 
    :maxValue="100" 
    :viewport="100"
    :fontSize="14" 
    :fontLineHeight="19"
    :lineWidth="10"
    :fontColor="'rgba(15, 31, 60, 1)'"
    :offsetColor="'rgba(227, 237, 255, 1)'"
    :progresColor="'rgba(66, 131, 252, 1)'"
/>

Props

The CircleProgress component allows you to customize the progress bar using the following props:

| Prop Name | Type | Description | Default | |-------------------|----------|-------------------------------------------|--------------------------| | progressValue* | Number | Current value of the progress bar. | - (required) | | minValue* | Number | Minimum value for the progress bar. | 0 | | maxValue* | Number | Maximum value for the progress bar. | 100 | | fontSize | Number | Font size of the progress text. | 22 | | fontLineHeight | Number | Line height for the progress text. | 29 | | fontColor | String | Color of the progress text. | rgba(15, 31, 60, 1) | | offsetColor | String | Color of the background circle. | rgba(227, 237, 255, 1) | | progresColor | String | Color of the progress indicator. | rgba(66, 131, 252, 1) | | lineWidth | Number | Width of the progress line. | 15 | | viewport | Number | Size of the circular progress bar. | 100 |