Progress Indicator

Overview

The Avonni Progress Indicator Component is a versatile tool for Salesforce Experience Cloud, providing visual progress tracking in various formats. This document details the settings available for customizing the Progress Indicator component.

Settings

🎛️ Properties

Name	Description
Type	Choose from Base, Vertical, Bar, Circle, Path, or Vertical Navigation styles.
Format	Linear: Standard progress flow. Non-linear: Progress does not follow a sequential order
Shaded	Apply shading effect to the component
Current Step	Define the current step in the progress flow.
Icon Alignment	Center: Center the icon in the step. Top: Align the icon at the top of the step
Icon Size	Select from Small, Medium, or Large.
Show Step Number	Display the number of each step.
Show Step Label	Display labels for each step.
Hide Bar Value	Hide the value/percentage on the progress bar.
Data Source	Manual: Manually input progress data. Picklist Values: Use values from a picklist to define progress

🎨 Styling

Name	Description
Bar	Customize color and completed color.
Icon	Offers extensive color customization, including: Focus, Regular, Fill, Border, Active, Completed, and Error Colors (and their Fill and Border variants).
Step Label	Text Color: Set the color of the label text. Font Size: Define the size of the font. Font Family: Choose the typeface for the label. Font Weight: Select the weight/thickness of the font. Text Shadow: Add shadow effect to the text. Line Clamp: Limit the number of lines for the label text