Progress Circle
Monitor completion with circular visuals for clear, appealing progress.
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 |
thickness | String | Set progress circle thickness. Valid values include |
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 updated