Progress
A progress track. Progress is the rail; one or more
ProgressBar children fill it by a now value
(0–100), each with an optional contextual variant.
Import
import { Progress, ProgressBar } from '@metatoy/bootstrap-styled';Bars & variants
now sets the fill percentage; variant colors the bar with any theme color.
Heights
The track has no fixed height token — set height (via style or a --bs-*
override) on the Progress element and the bar fills it.
Multiple bars
Place several ProgressBars inside one Progress to segment the track.
Props
ProgressBar
| Prop | Type | Default | Description |
|---|---|---|---|
| now | number | — | 0–100 |
| variant | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | — | — |
Progress is a styled <div> (the track) and accepts all native <div>
attributes, including style for a custom height.
Theming
Progress reads the Bootstrap --bs-progress-* tokens — --bs-progress-height,
--bs-progress-bg (the track), --bs-progress-bar-bg (the fill), plus font
size and radius. A ProgressBar with a variant overrides the fill with that
theme color. Override the track/fill tokens on an ancestor to re-skin every
bar at once.
Accessibility
Give each ProgressBar the ARIA progressbar attributes — role="progressbar",
aria-valuenow (matching now), aria-valuemin={0}, and aria-valuemax={100}
— plus an aria-label describing what is loading. The visual now value alone
is not announced, so the ARIA attributes are what assistive tech reads.