Holo Progress

The <holo-progress> component renders a role="progressbar" bar with either a determinate value or an indeterminate (unknown-duration) animation.

When to use

Use it for:

• Showing how far a measurable task has got: an upload, an import, a multi-step process.
• An indeterminate bar when you know work is running but not how much remains (indeterminate).

Don’t use it for:

• Showing a spinner for short, compact waits. Use Spinner.
• Page placeholders while content loads. Use Skeleton.
• Values the user can change. Use Slider.

Live Previews

Determinate

<holo-progress label="Upload progress" value="40" max="100"></holo-progress>

Indeterminate

<holo-progress label="Loading" indeterminate></holo-progress>

Accessibility

The host has role="progressbar" with aria-label from the label prop. In determinate mode it sets aria-valuemin="0", aria-valuemax (the max prop) and aria-valuenow (clamped to max). In indeterminate mode it omits all three, so assistive technology treats the progress as unknown. The component is not interactive.

• Progress is not announced as it changes. The role is not a live region, and screen readers usually do not read updates unprompted.
• The width transition and the indeterminate animation only run when prefers-reduced-motion: no-preference. With reduced motion, the indeterminate bar does not animate.

You provide:

• A label that says what is progressing (“Uploading report”). Without it the bar has no accessible name.
• Visible percentage or status text if users need the number, and a live region (for example Alert or a role="status" element) to announce completion.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-progress';

Properties

Property	Attribute	Type	Default	Description
indeterminate	indeterminate	boolean	false	If true, renders an indeterminate (busy, unknown-duration) progress bar and omits aria-valuenow.
label	label	string	—	The accessible label describing what is progressing.
max	max	number	100	The maximum progress value.
value	value	number	—	The current progress value. Omit (or set indeterminate) when the duration of the task is unknown.

CSS custom properties

Property	Description
--holo-progress-fill-bg	Color of the filled portion of the track.
--holo-progress-radius	Corner radius of the track.
--holo-progress-track-bg	Background color of the unfilled track.
--holo-progress-track-height	Height of the progress track.