Links

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
🎨 Styling
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).
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.
Last modified 3mo ago