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.
A descriptive text accompanying the progress circle.
A numerical representation of the progress, typically a percentage..
Toggles the display of the numerical value inside the progress circle.
Adjusts the overall size of the progress circle. Options may include small, medium, or large.
Sets the thickness of the progress bar in the circle, allowing for a more prominent or subtle display.
Determines the direction in which the progress bar fills (e.g., clockwise or counterclockwise).
An additional text element is typically used for a more detailed description or title.
Specifies the placement of the title with the progress circle (e.g., top, bottom).
Grey color, normal font style, medium weight.
Blue color, bold weight for emphasis.
Blue color for the progress bar, light grey background.
Black color, normal style, bold weight, limited to one line.