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

🎛️ Properties

Name	Description	Usage
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.
Value	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.

🎨 Styling