AX - Progress Bar

AX - Progress Bar is an Experience Cloud component that displays a visual progress indicator showing completion percentage or goal attainment on Experience Sites pages.

Use it to show portal users their progress toward goals, completion status of multi-step processes, percentage of requirements met, or any numeric progress metric from Salesforce data. Configure the progress value, labels, colors, and styling in Experience Builder.

Perfect for onboarding completion, goal tracking, profile completeness, training progress, or anywhere portal users need visual feedback on their advancement toward a target.

Label is the text displayed to identify the purpose of the progress bar, giving users a clear understanding of what progress it indicates.

Value is a numerical value representing the current progress — the percentage or fraction of the task or process that has been completed. Total is the number that must be reached for 100% progress (defaults to 100).

Value Label is the label shown next to the value, often as a percentage or fraction, giving a textual representation of the progress. Value Position places it relative to the bar: Top Right, Left, Right, Top Left, Bottom Right, or Bottom Left.

Size sets the thickness of the progress bar: Full, X-Small, Small, Medium, or Large.

Orientation sets the direction in which the bar fills — Horizontal or Vertical — aligning it with the flow of surrounding content.

Show Value toggles the display of the progress value label, letting you present numerical progress directly on the bar or keep the design clean and minimalistic.

Variant sets the shape of the progress bar: Base for a straight bar or Circular for a round indicator.

Textured adds a textured effect to the progress bar for a more dynamic, tactile appearance.

Theme applies a predefined color theme that indicates the nature or status of the progress: Base, Alt Inverse, Error, Info, Inverse, Offline, Success, or Warning — for instance, Success for completed tasks or Warning for pending actions.

Thickness adjusts the progress bar's thickness: Medium, X-Small, Small, or Large.

Alternative Text provides accessible text describing the progress bar for screen readers.