Comment on page

Progress Indicator

Track task progress with visual feedback and clear step indicators.

Overview
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.
Tutorials
Name
Description
Illustration
​Creating Navigational Screen Flows in Router Mode​
This component allows you to create a progress indicator that can be used to navigate from one screen to another. 
​
​
​Business Quote with vertical progress indicator​
This example will feature a vertical Progress Indicator, enabling users to navigate through various screens using Next and Previous buttons.
​
​
​Creating a Universal Dynamic Progress Step Collection​
Learn to create a dynamic Progress Step collection for universal application across screens, simplifying alterations and management.
​
​
Changing the Properties
Indicator Type
You can create progress indicators with different visual styling by specifying the type attribute.
Indicator Type
Image
Horizontal
​
Shows progress through a left-to-right sequence, guiding users through tasks or stages efficiently.
​
​
Vertical
​
Designed to track the progression of tasks or processes in a top-to-bottom layout.
​
​
Bar
​
Shows task completion as a horizontal fill within a bar, increasing as progress towards the goal advances.
​
​
Circle
​
Visually tracks task completion in a circular path, filling or highlighting as progress is made.
​
​
Path
​
Each step is denoted by a distinct marker,  reflecting the flow of the process. These markers are connected by a line or curve to guide the user through the various stages.
​
​
Vertical Navigation
​
Marks progress through steps in a top-to-bottom layout, visually guiding users through stages or tasks.
​
​
Adding a current step
To specify the current step, the current-step attribute must match one of the value attributes on a lightning-progress-step component.
Adding a Data Source
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.
Adding Interactions
Interactions define what will happen when users interact with the Navigation component. You can find a list of interactions available here.
Here are the available interactions for the Progress Indicator component:
On Step Click: The event when the user press on a step.
Styling the Progress Indicator
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)
Specifications
Attributes
Events
Styling
Name
Type
Description
currentStep
String
Set current-step to match the value attribute of one of progress-step components.
hasError
Boolean
To denote an error on the current step.
type
String
Change the visual pattern of the progress indicator. Include base and path.
variant
String
Changes the appearance of the progress indicator for the base type only.
steps
ProgressIndicatorStep[]
Array of step objects.
Name
Description
stepClick
The event fired when a step is clicked.
Border
Name
Description
Size
Define a size for the border around the component.
Style
Define a style for the border around the component.
Color
Define a color for the border around the component.
Radius
Define a radius value for the border around the component.
Bar
Name
Description
Bar Color
Define a color for the active bar
Background Color
Define a background color for the bar
Label
Name
Description
Font Color
Define a label font color.
Font Size
Define a label font size.
Font Weight
Define a label font weight.
Font Style
Define a label font style.
Value
Name
Description
Font Color
Define a font color if a value is present
Font Size
Define a font size if a value is present
Font Weight
Define a font weight if a value is present
Font Style
Define a font style if a value is present
Title
Name
Description
Font Color
Define a font color if a title is present
Font Weight
Define a style for the border around the component.
Font Style
Define a color for the border around the component.

Name	Description	Illustration
Creating Navigational Screen Flows in Router Mode	This component allows you to create a progress indicator that can be used to navigate from one screen to another.
Business Quote with vertical progress indicator	This example will feature a vertical Progress Indicator, enabling users to navigate through various screens using Next and Previous buttons.
Creating a Universal Dynamic Progress Step Collection	Learn to create a dynamic Progress Step collection for universal application across screens, simplifying alterations and management.

Indicator Type	Image
`Horizontal` Shows progress through a left-to-right sequence, guiding users through tasks or stages efficiently.
`Vertical` Designed to track the progression of tasks or processes in a top-to-bottom layout.
`Bar` Shows task completion as a horizontal fill within a bar, increasing as progress towards the goal advances.
`Circle` Visually tracks task completion in a circular path, filling or highlighting as progress is made.
`Path` Each step is denoted by a distinct marker, reflecting the flow of the process. These markers are connected by a line or curve to guide the user through the various stages.
`Vertical Navigation` Marks progress through steps in a top-to-bottom layout, visually guiding users through stages or tasks.

Name	Type	Description
`currentStep`	String	Set current-step to match the value attribute of one of progress-step components.
`hasError`	Boolean	To denote an error on the current step.
`type`	String	Change the visual pattern of the progress indicator. Include `base` and `path`.
`variant`	String	Changes the appearance of the progress indicator for the base type only.
`steps`	ProgressIndicatorStep[]	Array of step objects.

Name	Description
stepClick	The event fired when a step is clicked.

Name	Description
Size	Define a size for the border around the component.
Style	Define a style for the border around the component.
Color	Define a color for the border around the component.
Radius	Define a radius value for the border around the component.

Name	Description
Bar Color	Define a color for the active bar
Background Color	Define a background color for the bar

Name	Description
Font Color	Define a label font color.
Font Size	Define a label font size.
Font Weight	Define a label font weight.
Font Style	Define a label font style.

Name	Description
Font Color	Define a font color if a value is present
Font Size	Define a font size if a value is present
Font Weight	Define a font weight if a value is present
Font Style	Define a font style if a value is present

Name	Description
Font Color	Define a font color if a title is present
Font Weight	Define a style for the border around the component.
Font Style	Define a color for the border around the component.

Last modified 11d ago