Comment on page
Track task progress with visual feedback and clear step indicators.
The Progress Indicator component displays the progress of a task or process using a visual element. It typically consists of a graphic element indicating the number of steps in a given process, the current step, and the prior steps completed. The Progress Indicator component is often used to provide visual feedback to the user on the status of a task or process.
You can create progress indicators with different visual styling by specifying the
To specify the current step, the
current-stepattribute must match one of the
valueattributes on a
This is where you will connect your Progress Indicator to a Data Source:
Manual: type your steps manually and define the value.
Variable: Select a source collection from your flow and map the attributes.
Here are the available interactions for the Progress Indicator component:
Step Click: The event when the user press on a step.
From the Style panel, you can customize styling attributes for the Progress Indicator component:
Margin: to customize margin settings.
Padding: to customize padding settings.
Border: to customize border styling.
Bar: to customize bar styling (based on the progress indicator type selected).
Label: to customize label styling if the label is present (based on the progress indicator type selected).
Value: to customize value styling if the value is present (based on the progress indicator type selected)
Title: to customize title styling if present (based on the progress indicator type selected)
Last modified 11d ago