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 is a simple yet powerful visual element that displays the progress of a task or process within your flow. It's a circular gauge that fills up as the task progresses, providing users with a clear and intuitive understanding of how far along they are.

Changing the Properties

What Determines Your Progress Circle's Value?

You have several options for how the progress circle displays its progress:

• Mapped: Directly link the progress circle to a single Salesforce field or variable. This is ideal for straightforward scenarios where a single value represents progress (e.g., percentage complete, number of tasks finished).

• Advanced (Formula): Create a formula that calculates the progress value by combining multiple fields or variables. This offers more flexibility, allowing you to factor in multiple criteria (e.g., average of multiple scores, weighted progress across different tasks).

• Query: Run a Salesforce query to fetch the progress value directly from your data. This is useful for aggregating data across records (e.g., showing overall project completion based on the status of individual tasks). You can use functions like AVG or MAX within your query.

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