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 dynamically for the Progress Bar.

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.

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.

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.

How to Apply a Gradient to Your Progress Bar

The Progress Indicator component lets you customize the appearance of your progress bar using gradients. Here's how:

1. Locate the 'Completed color' Setting: Find the "Bar" style section in the Style panel. You'll see the "Completed color" attribute.

2. Apply Your Gradient:

   • Gradient Angle: Choose the direction of your gradient.

   • Gradient Colors: Define the colors you want in your gradient.

   • Color Positions: Indicate where each color should start and stop using percentages (%).

Example: If you want a gradient that transitions from red (0%) to yellow (50%) to green (100%), you will set those colors at their corresponding percentage positions