Progress Circle

Overview

The Avonni Progress Circle Component depicts progress or completion rates in a circular format. Ideal for dashboards, task completion statuses, or any metric representation, it offers a range of customization options to suit different visual requirements.

Settings

🎛️ Properties

Name	Description
Label	A descriptive text accompanying the progress circle.
Value	A numerical representation of the progress, typically a percentage..
Show Value	Toggles the display of the numerical value inside the progress circle.
Size	Adjusts the overall size of the progress circle. Options may include small, medium, or large.
Thickness	Sets the thickness of the progress bar in the circle, allowing for a more prominent or subtle display.
Direction	Determines the direction in which the progress bar fills (e.g., clockwise or counterclockwise).
Title	An additional text element is typically used for a more detailed description or title.
Title Position	Specifies the placement of the title with the progress circle (e.g., top, bottom).

🎨 Styling

Name	Description
Label	Grey color, normal font style, medium weight.
Value	Blue color, bold weight for emphasis.
Bar	Blue color for the progress bar, light grey background.
Title	Black color, normal style, bold weight, limited to one line.