Progress Bar
Overview
The Avonni Progress Bar Component offers a dynamic and visually engaging way to represent progress towards a goal or completion status within Experience Cloud websites. It provides immediate visual feedback to users on the status of ongoing processes, task completions, or any other progression metrics.
Settings
Label
The text displayed to identify the purpose of the progress bar.
Implement this property to provide users with a clear understanding of what progress the bar is indicating.
A numerical value that represents the current progress.
Set this property to reflect the percentage or fraction of the task or process that has been completed.
Value Label
The label that will be shown next to the value, often as a percentage or fraction.
Use this to give a textual representation of the progress value, providing clarity to users.
Value Position
Position of the value label relative to the progress bar. Options include Top Right, Left, Right, Top Left, Bottom Right, and Bottom Left.
Choose a value position that enhances readability and fits the design of the surrounding content.
Size
The thickness of the progress bar. Options include Full, X-Small, Small, Medium, and Large.
Select a size that ensures the progress bar is conspicuous and harmonious with the overall design layout.
Orientation
The direction in which the progress bar fills. Can be set to Horizontal or Vertical.
Align the orientation with the layout and direction of the content flow for intuitive progress visualization.
Show Value
A toggle to display or hide the progress value label.
Use this setting to either present numerical progress directly on the bar for user reference or to keep the design clean and minimalistic.
Variant
The shape of the progress bar. Options are Base for a straight bar or Circular for a round progress indicator.
Choose a variant that best fits the siteās design motif and the type of progress being displayed.
Textured
Adds a textured effect to the progress bar for additional visual detail.
Apply this property to create a more dynamic and tactile appearance for the progress bar.
Theme
Predefined color themes that indicate the nature or status of the progress. Available themes include Base, Alt Inverse, Error, Info, Inverse, Offline, Success, and Warning.
Select a theme to convey different meaningsāfor instance, use Success for completed tasks or Warning for pending actions.
Thickness
Adjust the progress bar's thickness. Options include Medium, X-Small, Small, and Large.
Choose the thickness that ensures the progress barās prominence and aesthetic compatibility with other site elements.
Last updated
Was this helpful?
