Striped Progress

Features

• A single determinate striped progress bar seated in an industrial inset-well tray
• Barber-pole hazard stripes rendered as a ::after overlay that animates only transform
• Determinate fill sized by a --pb-prog percentage, revealed with an animated clip-path (never a width transition)
• Compact replay control restarts the 0–64% simulated transfer and exposes synchronized disabled and aria-busy state
• Service-bay backdrop: faint 45° diagonal safety stripes over the page background, with a dark twin
• Monospace percent readout with tabular numerals kept in sync with aria-valuenow and aria-valuetext
• role="progressbar" with aria-valuenow/aria-valuemin/aria-valuemax
• Visible transfer and status text label and describe the progressbar; visual track and readout duplicates are decorative
• Panel, status chip, track, and replay control propagate shared design-system shape and elevation contracts
• Essential label, status, percentage, and replay icon use design-system foreground in both themes
• Reduced-motion support that stops the stripe animation and neutralizes the value transition

Accessibility

ARIA roles

Determinate bar uses role="progressbar" with aria-valuenow/aria-valuemin/aria-valuemax

Accessible value

Visible label/status connect through aria-labelledby/aria-describedby; aria-valuetext mirrors the percentage

Decorative duplicates

The visual track and percent readout are hidden from assistive technology

Replay state

Native disabled and aria-busy stay synchronized while replay runs

Focus indicators

:focus-visible with --ring outline

Reduced motion

prefers-reduced-motion: reduce stops the stripe animation

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open Striped Progress in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the progress is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.