Links
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
This component allows you to create a progress indicator that can be used to navigate from one screen to another.
​
​
This example will feature a vertical Progress Indicator, enabling users to navigate through various screens using Next and Previous buttons.
​
​
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.
Last modified 11d ago