Progress bar

Live demo

Renders a progress bar.

Node name : progress-bar

Attributes

Attribute	Type	Required	Default value	Description
mode	string (determinate, indeterminate)	false	determinate	Defines how the progress is displayed: determinate shows actual progress, indeterminate shows an ongoing animation without a specific value.
value	number	false		Progress percentage. Must be a number between 0 and 100. Used only in determinate mode.
show-value	bool	false	true	Indicates whether the numeric value (percentage) is displayed alongside the progress bar. Used only in determinate mode.
value-background	string	false		Fill color for this instance (any CSS color value), overriding the theme's default fill color. Can be a static value or bound to data, including per item inside a <repeat>.
corner-radius	string (none, extrasmall, small, medium, large, extralarge, full)	false		Corner radius for this instance, overriding the theme's default. Applies to both the track and the fill. Same vocabulary as the generic style:corner-radius directive.
label-color	string	false		Percentage label color for this instance when the label renders inside the fill, overriding the theme's default.
label-outside-color	string	false		Percentage label color for this instance when the label renders outside the fill, on the track (see Remarks below).
label-size	string (extrasmall, small, medium, large, extralarge) or int	false	medium	Percentage label font size for this instance, using a predefined value from the theme or a hardcoded one in pixels (same convention as the text component's size attribute).

Remarks

The track's own color and corner radius are already configurable per instance without a dedicated attribute, through the generic style:background and style:corner-radius directives (usable on any element). value-background, corner-radius, label-color, and label-outside-color above exist specifically because the fill and the label sit inside the component and have no generic directive reaching them. corner-radius accepts the same token vocabulary as style:corner-radius (none, extrasmall, small, medium, large, extralarge, full), not an arbitrary CSS value.

When the fill is too narrow to contain the percentage label, the label automatically moves outside the fill and renders on the track instead of being clipped. Since the label then sits on the track's background rather than on the fill's, label-color (used while inside the fill) and label-outside-color (used once outside) can be set to different values to keep the label readable in both positions.

label-size follows the same convention as the text component's size attribute: a predefined value (extrasmall, small, medium, large, extralarge) selects one of the theme's configured sizes, while a hardcoded pixel value bypasses the theme entirely for a one-off override - an arbitrary CSS value like a rem length is not accepted.

Example

<progress-bar value="50" />

<progress-bar mode="indeterminate" />

<progress-bar value="50" value-background="#0f6e63" />

<progress-bar value="50" corner-radius="none" />

<progress-bar value="50" label-color="#ffffff" />

<progress-bar value="1" value-background="#0f6e63" label-color="#ffffff" label-outside-color="#111111" />

<progress-bar value="50" label-size="large" />

<progress-bar value="50" style:background="#dfe2e6" style:corner-radius="full" />

<repeat source="@Fields.Grades">
  <progress-bar value="@Item.Percent" value-background="@Item.Color" />
</repeat>