Progress bar

Progress-bar component visually represents the progression of a task or process. It informs the user about occuring action and offers multiple variations.

Examples

The first example demonstrates the basic usage of the progress bar component. It uses the default color, displays text, and shows the current value.

import "spatial-design-system/primitives/ar-progressbar.js";

<a-ar-progressbar
    position="0 1.5 -3"
    value="60"
    textvisibility="true"
></a-ar-progressbar>

The next example demonstrates different component states. The first progress bar is in the error state and also uses the reversed property, rendering progress from right to left. The second progress bar is in the warning state. These states are useful for indicating the status of various tasks.

import "spatial-design-system/primitives/ar-progressbar.js";

<a-ar-progressbar
    position="0 2 -3"
    value="85"
    textvisibility="true"
    state="error"
    rounded="true"
    reversed="true"
></a-ar-progressbar>

<a-ar-progressbar
    position="0 1.3 -3"
    value="40"
    textvisibility="true"
    state="warning"
    rounded="true"
></a-ar-progressbar>

The final example demonstrates the use of the mode property. The progress bar is shown in light mode with rounded edges and hidden text.

import "spatial-design-system/primitives/ar-progressbar.js";

<a-ar-progressbar
    position="0 1.5 -3"
    value="60"
    textvisibility="false"
    mode="light"
    rounded="true"
></a-ar-progressbar>

Props

Property	Type	Default	Description
visible	boolean	true	Controls the progress bar's visibility. When true, the progress bar is visible; when false, it is hidden.
position	number[]	0 0 0	Specifies the progress bar's position.
size	enum (small, medium, large)	medium	Sets the progress bar's size, adjusting padding, font size, and layout compactness accordingly.
value	number	100	Represents the current progress as a percentage. This determines how much of the bar is filled.
textvisibility	boolean	false	Controls whether the current progress percentage is displayed. If true, the value is shown (e.g., 60%).
textcolor	string	black	Specifies the color of the progress bar's text. If the contrast with the background is insufficient, the text color will not be applied.
color	string (blue, #fff)	#00BA92	Defines the primary color of the progress bar, affecting elements such as text and background.
mode	string (light, dark)	""	Specifies the color scheme of the progress bar, supporting either a light or dark theme.
state	string (success, warning, error, disabled, indicating)	""	Indicates the current state of the component. This property has priority over other appearance-related properties to reflect important statuses such as errors or warnings.
rounded	boolean	false	Specifies whether the progress bar has rounded edges.
reversed	boolean	false	When true, the progress direction is reversed (right-to-left mode).