Links
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.
Last modified 16d ago