About this set
Four progress bars with texture and motion, for work that takes a while. Striped lays a 45 degree stripe tile over the fill, sized to the bar height so the stripes stay square at any size, shown on a mailbox migration. Animated stripes slides the same tile one width per second to show that a video render is still running, the look of Bootstrap’s progress-bar-animated. Indeterminate is for jobs with no known end, such as preparing an export: a 40 percent segment sweeps across a thin track, and the bar leaves out aria-valuenow, which is how ARIA marks an unknown amount. Glint keeps a plain determinate fill and runs a soft highlight across it every couple of seconds, used here for installing 3 of 7 updates with the count in aria-valuetext. Use the stripes when you want to show activity on a known value and the indeterminate bar only until the first real number arrives. Everything is CSS keyframes on background-position and transform, and each loop stops under prefers-reduced-motion, where the indeterminate bar turns into a still, full-width stripe so it still reads as busy.
What’s included
- Striped, animated stripes, indeterminate and glint variants
- Stripe tile sized to the bar height
- Indeterminate bar without aria-valuenow, as ARIA specifies
- Every loop stops under prefers-reduced-motion
- Still, full-width stripe as the reduced-motion indeterminate state
- Bootstrap version uses .progress-bar-striped and .progress-bar-animated
Accessibility
Each bar has role="progressbar" and a visible label tied to it with aria-labelledby; the determinate bars carry aria-valuenow and, where the number needs context, aria-valuetext such as 3 of 7 updates installed. The indeterminate bar omits aria-valuenow and points to its explanation with aria-describedby. Under prefers-reduced-motion the stripes, sweep and glint stop, and the indeterminate bar becomes a still striped track.
Customise it
Change --sb-accent, --sb-track and --sb-h on .sb in the plain CSS version; the stripe tile follows --sb-h. In Bootstrap set --bs-progress-height and --bs-progress-bar-bg on .progress. In Tailwind edit the sb- theme colours and the --animate-sb-* durations in @theme.
