Links

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
Last modified 3mo ago