The Progress-Circle component is a dynamic graph component designed to display percentage data in a circular format.
It's a visually appealing way to represent percentage data such as progress bars, performance metrics, or financial data in dashboards and other data-heavy interfaces.
Progress circle usage in the Outlet list in CADI
The Progress-Circle component displays percentage data and its corresponding value in the center of the circle.
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Progress Circle |
To display percentage data such as progress bars, performance metrics, or financial data in tables, dashboards, and other data-heavy interfaces. |
Can be placed in any container element, as long as there is enough space to not overlap or obstruct any other elements in the interface. |
The Progress-Circle component is static and does not require any user action. |
Please use the Progress-bar as an alternative, if horizontal space is not an issue.
Anatomy
Structure
|
|
|
Ellipse |
The foreground circle shape represents the percentage of the data. The percentage value is displayed in the ellipse. The ellipse will be dynamic with clockwise growth responsive to percentage information. The initial use-case is static, no animation is required. |
|
Circle |
Background container for Ellipse. Border weight 2, aligned outside. |
|
Percentage Label |
A label that displays percentage data and its corresponding value in the center of the circle. |
Sizes and Spaces
|
The min-width is 65px and the height is 20px. |
|
|
The distance between the Circle and the Percentage Label is 8px in both positions. |
|
The distance between the Ellipse and Circle is 2px and aligned outside. |
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Percentage |
default=0
|
The percentage of data to be displayed in the foreground. Just display round numbers. |
|
Color |
digital-black primary secondary notification live hold close update parked multiple support100 support80
default=digital-black |
The color of the foreground circle. |
|
Percentage Label |
true false
default=true |
The text information of percentage data. The default is true. |
|
Percentage Position |
left right
default=left |
If the percentage label is true, the percentage position is applied. The default is left. |
|
Percentage Round Method |
up down
default=up |
The percentage label data is a round number. The default round method is up. |
Behaviour
Interaction
The Progress-Circle component is inactive, it remains static to display the data information. It does not have any user interactions.
If the percentage is below zero, the Ellipse will display as zero, and if it's above 100, it will display as 100.
If the percentage value is not a number, the Ellipse will display as zero.
In the Label, only allows round numbers, and if the percentage is below zero or above 100, it will display its value.
If the value is not a number, the label will display "Error" without the "%" sign.
Responsiveness
There is no changes to the Progress-Circle component when it comes to responsiveness.
To avoid CLS (Cumulative Layout Shift), the label has a min-width set (view Sizes and Spaces).
Guidelines
|
|