Comment on page

Progress Bar

The Progress Bar component is a visual indication of progress based on a percentage value.

​
The Progress Bar is also available as an Experience Cloud Component.
Overview
The Progress Bar component displays the progress of a task or process. It typically consists of a horizontal bar filled to a certain extent, with the degree of filling representing the completion percentage. The Progress Bar component is often used to provide visual feedback to the user on the status of a task or process.
Changing the properties
Adding a value
The Value displayed on the progress bar component comes from the value field. You can type the value manually or select any of your flow resources to assign a value for the Progress Bar dynamically.   
Manual VS Mapped value
Choosing a Variant and a Theme
Variant and Theme attributes defines the apparence of the Progress Bar indicator. The Variant lets you choose from Base to Circular. 
Base VS Circular Variant
The theme attribute lets you define a specific theme for the Progress Theme. Styling settings for a theme can override by using the Style Panel. 
Adding an avatar
An avatar can be added next to the Progress Bar, either on the left or right side using the Position attribute. The avatar can be an icon from the Lightning Design System library or a custom image by uploading a custom image on the Image attribute. 
Progress Bar with Avatar
Adding Interactions
No interactions are available.
Styling the Progress Bar
From the Styles panel, you can customize styling attributes for the Progress Bar: 
Size: to customize a specific size for the Progress Bar component.
Base: to customize the bar and background color of the base variant.
Alt Inverse: to customize the bar and background color of the Alt Inverse variant.
Error: to customize the bar and background color of the Alt Inverse variant.
Info: to customize the bar and background color of the Info variant.
Inverse: to customize the bar and background color of the Inverse variant.
Offline: to customize the bar and background color of the Offline variant.
Success: to customize the bar and background color of the Success variant.
Warning: to customize the bar and background color of the Warning variant.
Value: to customize styling for the Value if used.
Label: to customize styling for the Label if used.
You can find the instructions for styling here.
Examples
​
Specifications
Attributes
Name
Type
Description
Label
String
Label text for the Progress Bar.
Value
String
The percentage value of the Progress Bar.
Show Value
Boolean
To display the Progress Bar Value.
Value Position
String
To set the Position of the Progress Bar Value.
Value Label
String
To add a label text next to the Progress Bar Value.
Variant
String
To change the apparence of the Progress Bar.
Theme
String
To define a theme of the Progress Bar. Styling settings can be customized from the Style Panel.
Size
String
To set a size of the Progress Bar. Available values are: X Small, Small, Medium, Large, Full.
Thickness
String
To set the progress thickness. Available values are: X Small, Small, Medium, Large.
Orientation
String
To set the orientation of the Progress Bar. 
Textured
Boolean
If present, display a texture background.
Avatar
​
To add an avatar next to the Progress Bar.

Name	Type	Description
Label	String	Label text for the Progress Bar.
Value	String	The percentage value of the Progress Bar.
Show Value	Boolean	To display the Progress Bar Value.
Value Position	String	To set the Position of the Progress Bar Value.
Value Label	String	To add a label text next to the Progress Bar Value.
Variant	String	To change the apparence of the Progress Bar.
Theme	String	To define a theme of the Progress Bar. Styling settings can be customized from the Style Panel.
Size	String	To set a size of the Progress Bar. Available values are: `X Small`, `Small`, `Medium`, `Large`, `Full`.
Thickness	String	To set the progress thickness. Available values are: `X Small`, `Small`, `Medium`, `Large`.
Orientation	String	To set the orientation of the Progress Bar.
Textured	Boolean	If present, display a texture background.
Avatar		To add an avatar next to the Progress Bar.

Last modified 16d ago