Progress Bar
The Avonni Progress Bar visually represents the completion percentage of a task or process.
The Progress Bar displays a visual indicator of completion toward a goal. It supports horizontal and vertical orientations, multiple color themes, an optional avatar, and a pin that marks the current value.
Overview
Use the Progress Bar to show how far along a process is — a sales quota, a project milestone, or a customer satisfaction score. The value can be mapped directly from a Salesforce field, calculated with a formula, or aggregated from a query.
Configuration
To configure it, click the component on the Flow screen. The Edit Progress Bar Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Properties
Label
Text displayed above or beside the progress bar to describe what is being measured.
Orientation
Choose Horizontal (default) or Vertical for the bar's direction.
Variant
Base (default) — a standard flat bar. Rounded — a bar with rounded ends.
Theme
Sets the color scheme: Base, Success, Inverse, Alt Inverse, Warning, Info, Error, or Offline. Can be overridden in the Style tab.
Size
Controls the bar's width relative to its container: X-Small, Small, Medium, Large, or Full (default, fills available space).
Thickness
Sets the bar's height: X-Small, Small, Medium (default), or Large.
Textured
When enabled, displays a texture pattern on the bar's background.
Alternative Text
Accessible text description of the progress bar, read by assistive technologies.
Value
The Value group controls what the bar displays and how the current progress is calculated.
Value
The current progress value. Connect to a Salesforce field, a flow variable, or set a Query to aggregate across records.
Total
The value that represents 100% completion (default: 100). Set a query here to calculate the total dynamically.
Show Value
When enabled, displays the numeric value alongside the bar.
Value Position
Where the value is shown: Top Right (default), Top Left, Bottom Right, Bottom Left, or — for horizontal bars only — Left or Right. Requires Show Value to be enabled.
Value Prefix
Text displayed before the value (e.g., "$"). Requires Show Value to be enabled.
Value Suffix
Text displayed after the value (e.g., "%", "pts"). Requires Show Value to be enabled.
Example (Mapped): Link the bar directly to an "Amount Closed" field to show a rep's progress toward quota.
Example (Query): Use AVG on a "Percent Complete" field across all Opportunities in a stage to show overall pipeline health.
Avatar
The Avatar group adds an image, icon, or initials alongside the bar.
Initials
Text displayed inside the avatar when no image or icon is provided.
Fallback Icon
Icon to show if the image fails to load.
Image (Src)
Upload a custom image to display as the avatar.
Variant
Avatar shape: Circle or Square.
Size
Size of the avatar.
Position
Where the avatar appears: Left or Right of the bar.
Pin
The Pin group adds a marker on the bar to highlight the current value position.
Show Pin
When enabled, displays a pin at the current value position.
Type
Shape of the pin: Circle or Rectangle (default). Only shown when Show Pin is enabled.
Position
For vertical bars, sets whether the pin appears on the Left or Right side of the bar.
Styling
The Style tab gives you fine-grained control over the progress bar's appearance. Configure it from the Style tab of the Edit Progress Bar panel.
Controls the outer spacing around the progress bar, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the progress bar's content and its edges.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the progress bar's dimensions.
Width / Height: Set fixed dimensions.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the border surrounding the progress bar.
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Styles the label text.
Color: Set the label text color.
Font Size / Font Style / Font Weight: Control the label typography.
Line Clamp: Limit the label to a maximum number of lines.
Styles the displayed numeric value.
Color: Set the value text color.
Font Size / Font Style / Font Weight: Control the value typography.
Styles the optional avatar shown on the progress bar.
Image Object Fit: Control how the avatar image fills its space.
Styles the value pin marker.
Background Color / Text Color: Set the pin colors.
Font Style / Font Weight: Control the pin typography.
Styles the bar itself. Colors are set per variant (base, alt-inverse, error, info, inverse, offline, success, warning).
Color: Set the color of the unfilled portion.
Completed Color: Set the fill color of the completed portion. Gradients are supported — choose the gradient angle and color stops with percentage positions (e.g. red at 0%, yellow at 50%, green at 100%).
Output Variables
The Progress Bar exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Progress Bar component, and pick the output variable you need.
Others
Percentage
Integer
The current progress value expressed as a number between 0 and 100.
Example: After a screen where the bar visualises a sales quota, store Percentage in a flow variable and use it in a decision element to route reps who have reached 100% to a congratulations screen.
Last updated
Was this helpful?