Progress bar

<oblyx-progress-bar> is a determinate or indeterminate progress meter. label is required: it is both the accessible name and the visible label text, there is no unlabeled progress bar.

Basic progress bar

HTML

Kotlin

<oblyx-progress-bar value="60" label="Uploading"></oblyx-progress-bar>

oblyxProgressBar(value = 60, label = "Uploading")

Determinate versus indeterminate

Both modes render the same role="progressbar" element; the difference is entirely in which aria-value* attributes are present. Determinate sets aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext all together and requires value. indeterminate omits every one of them, which is exactly how ARIA defines an indeterminate progress meter, not a gap in this component. Choose indeterminate only when there is genuinely no fraction to compute; the moment you can estimate one, even roughly, determinate is more informative to a waiting user. For a case with no meter at all, not even an unknown one, reach for spinner instead: that's a role="status" announcing a name, a different semantic claim from a progress meter whose value happens to be unknown.

Indeterminate

HTML

Kotlin

<oblyx-progress-bar indeterminate label="Checking for updates"></oblyx-progress-bar>

oblyxProgressBar(indeterminate = true, label = "Checking for updates")

Max and value

max defaults to 100, so a plain value reads as a percentage out of the box. Set max to anything else for a meter over a different range, such as a step count.

Custom max

HTML

Kotlin

<oblyx-progress-bar value="3" max="5" label="Step 3 of 5" has-value-label></oblyx-progress-bar>

oblyxProgressBar(value = 3, max = 5, label = "Step 3 of 5", hasValueLabel = true)

Value label

has-value-label shows the resolved percentage, for example "75%", next to the bar. It's ignored when indeterminate is set, since there is no value to show.

With a value label

HTML

Kotlin

<oblyx-progress-bar value="75" label="Disk usage" has-value-label></oblyx-progress-bar>

oblyxProgressBar(value = 75, label = "Disk usage", hasValueLabel = true)

Hiding the visible label

label-hidden visually hides the label while keeping it as the accessible name, for a progress bar placed somewhere its own text label would be redundant next to surrounding copy that already says what's loading.

Visually hidden label

HTML

Kotlin

<oblyx-progress-bar value="40" label="Loading dashboard" label-hidden></oblyx-progress-bar>

oblyxProgressBar(value = 40, label = "Loading dashboard", labelHidden = true)

Variant

Fill color. accent is the default; the semantic values read as status the same way alert's do, and neutral is for a bar with no status connotation at all.

Progress bar variants

HTML

Kotlin

<oblyx-progress-bar value="60" label="Accent" variant="accent"></oblyx-progress-bar>
<oblyx-progress-bar value="60" label="Success" variant="success"></oblyx-progress-bar>
<oblyx-progress-bar value="60" label="Warning" variant="warning"></oblyx-progress-bar>
<oblyx-progress-bar value="60" label="Error" variant="error"></oblyx-progress-bar>
<oblyx-progress-bar value="60" label="Neutral" variant="neutral"></oblyx-progress-bar>

oblyxProgressBar(value = 60, label = "Accent", variant = OblyxProgressBarVariant.ACCENT)
oblyxProgressBar(value = 60, label = "Success", variant = OblyxProgressBarVariant.SUCCESS)
oblyxProgressBar(value = 60, label = "Warning", variant = OblyxProgressBarVariant.WARNING)
oblyxProgressBar(value = 60, label = "Error", variant = OblyxProgressBarVariant.ERROR)
oblyxProgressBar(value = 60, label = "Neutral", variant = OblyxProgressBarVariant.NEUTRAL)

Disabled

disabled is a visual-only presentation; it carries no ARIA state of its own.

Disabled progress bar

HTML

Kotlin

<oblyx-progress-bar value="30" label="Import paused" disabled></oblyx-progress-bar>

oblyxProgressBar(value = 30, label = "Import paused", disabled = true)

Reference

`<oblyx-progress-bar>`

Attribute	Type	Default	Description
`value`	`number \| undefined`	–	Current value. Ignored, and may be omitted, when `indeterminate` is set. Required otherwise.
`max`	`number`	`100`	Maximum value.
`label`	`string \| undefined`	–	Accessible name and visible label text. Required.
`label-hidden`	`boolean`	`false`	Visually hides the label while keeping it accessible to assistive tech.
`has-value-label`	`boolean`	`false`	Shows the resolved percentage (e.g. "75%") next to the bar. Ignored when `indeterminate` is set, since there is no value to show.
`variant`	`accentsuccesswarningerrorneutral`	`accent`	Fill color.
`indeterminate`	`boolean`	`false`	Renders an indeterminate sliding fill with no value claim at all, instead of a fixed-width fill at `value`.
`disabled`	`boolean`	`false`	Disabled, visual-only presentation.