# Striped Progress

> An industrial hazard-tape progress bar — a barber-pole striped fill inside a recessed service-bay well, faint diagonal safety stripes on the backdrop, a mono percent readout, and one replay control for the simulated transfer. Token-driven and design-system adaptive.

- Category: Progress
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Odyssey
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: progress-bar
- Page: https://builder.atheros.ai/components/progress-striped
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_progress_striped/preview-95b0be504aa2.webp

## 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

## Keyboard shortcuts

- `Enter` — Replay the transfer when the replay control is focused
- `Space` — Replay the transfer when the replay control is focused

## Common questions

**Which frameworks is Striped Progress available in?**

Striped Progress ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Striped Progress free?**

Striped Progress is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Striped Progress support dark mode?**

Yes. Striped Progress ships light and dark themes, both drawn from the Odyssey design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Striped Progress live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/progress-striped

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt