Comment on page

Progress Circle

Monitor completion with circular visuals for clear, appealing progress.

​
The Progress Circle is also available as an Experience Cloud Component.
Overview
The Progress Circle component displays the progress of a task or process using a circular visual element. It typically consists of a circle filled to a certain extent, with the degree of filling representing the completion percentage. The Progress Circle component is often used to provide visual feedback to the user on the status of a task or process in a compact and visually appealing manner.
You can also customize the appearance and functionality of the progress circle by using the available formatting and customization options. The Progress Circle component is a valuable and versatile tool for providing visual feedback on the progress of a task or process within your flow, and can help to improve the overall user experience.
Changing the Properties
Adding a value
You can enter the progress circle value manually and select a resource from the mapped attribute to add a value dynamically from your flow.
Advanced option
Thickness
You can set the Progress Circle Thickness with values like: x-small, small, medium, large and x-large.
Direction
Controls which way the color flows from the top of the ring, either clockwise or counterclockwise.
Adding Interactions
No interactions are available.
Styling the Progress Circle
From the Styles panel, you can customize styling attributes for the Progress Circle: 
Bar: customize the bar color and background color.
Value: customize styling for the value if the value is not hidden.
Title: customize styling for the Progress Circle title.
Label: customize styling for the Label if any.
You can find the instructions for styling here.
Examples
Specifications
Attributes
Name
Type
Description
direction
String
Controls which way the color flows from the top of the ring, either clockwise or counterclockwise Valid values include fill and drain.
isLoading
Boolean
If present the progress bar displays a loading animation. The value goes from 0 to 100 repeatedly and the label displays a 3 dots animation. The value and labels become hidden.
label
String
The label is displayed after the value in the progress circle.
size
String
The size of the progress circle. Valid values include x-small (26x26px), small (52x52px), medium (104x104px), large (152x152px) and x-large (208x208px).
thickness
String
Set progress circle thickness. Valid values include x-small, small, medium, large and x-large.
title
String
The title is displayed at the bottom or top of the progress circle.
titlePosition
String
Position of the title. Valid values include top and bottom.
value
Integer
The percentage value of the progress ring.
The value must be a number from 0 to 100. A value of 50 corresponds to a color fill of half the ring in a clockwise or counterclockwise direction, depending on the direction attribute.
variant
String
Accepted variants include standard, value-hidden.
Events
No events are available.
Styling Hooks
Bar
Name
Description
Color
Define the color of the bar based on the value
Background Color
Define the background color of the bar
Value
Name
Description
Text Color
Define the value text color if the value is not hidden
Font Size
Define the value font size if the value is not hidden
Font Style
Define the value font style if the value is not hidden
Font Weight
Define the value font-weight if the value is not hidden
Title
Name
Description
Text Color
Define the title text color
Font Size
Define the title font size
Font Style
Define the title font style
Font Weight
Define the title font weight
Label
Name
Description
Text Color
Define the label text color
Font Size
Define the label font size
Font Style
Define the label font style
Font Weight
Define the label font weight

Name	Type	Description
direction	String	Controls which way the color flows from the top of the ring, either clockwise or counterclockwise Valid values include fill and drain.
isLoading	Boolean	If present the progress bar displays a loading animation. The value goes from 0 to 100 repeatedly and the label displays a 3 dots animation. The value and labels become hidden.
label	String	The label is displayed after the value in the progress circle.
size	String	The size of the progress circle. Valid values include `x-small` (26x26px), `small` (52x52px), `medium` (104x104px), `large` (152x152px) and `x-large` (208x208px).
thickness	String	Set progress circle thickness. Valid values include `x-small`, `small`, `medium`, `large` and `x-large`.
title	String	The title is displayed at the bottom or top of the progress circle.
titlePosition	String	Position of the title. Valid values include top and bottom.
value	Integer	The percentage value of the progress ring. The value must be a number from 0 to 100. A value of 50 corresponds to a color fill of half the ring in a clockwise or counterclockwise direction, depending on the direction attribute.
variant	String	Accepted variants include standard, value-hidden.

Name	Description
Color	Define the color of the bar based on the value
Background Color	Define the background color of the bar

Name	Description
Text Color	Define the value text color if the value is not hidden
Font Size	Define the value font size if the value is not hidden
Font Style	Define the value font style if the value is not hidden
Font Weight	Define the value font-weight if the value is not hidden

Name	Description
Text Color	Define the title text color
Font Size	Define the title font size
Font Style	Define the title font style
Font Weight	Define the title font weight

Name	Description
Text Color	Define the label text color
Font Size	Define the label font size
Font Style	Define the label font style
Font Weight	Define the label font weight

Last modified 16d ago