# Progress Classic

> A single editorial determinate progress bar — a solid accent fill with a soft glassy top-highlight sitting in a calm card, with an understated tabular percent, fully token-driven and design-system agnostic.

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

## Features

- Upload progress has no fake plus, minus, or export controls.
- The presentation is design-system adaptive with live `aria-valuenow`/`aria-valuetext` updates, a 44px target and synchronized native disabled/`aria-busy` state.
- Essential upload copy, percentage, and replay glyph use design-system foreground; the visual track and percent readout are hidden from assistive technology.
- A single classic determinate progress bar in an editorial plaque card
- Solid primary fill with a soft glassy top-highlight rendered by a pseudo-element gradient (a light specular wash, never the fill's readable ink)
- Static upload progress authored through `aria-valuenow`, with no fake increment/decrement controls
- Fill length driven by a `--pb-x` custom property animated with a `clip-path` transition (never a width transition), so the leading cap keeps the track's radius at every value
- Understated tabular-figures percent readout beside the track
- `role="progressbar"` with live value and accessible-name synchronization on every change
- Editorial "ruled paper" identity — a warm paper canvas with faint horizontal baseline rules and a whisper of rose tint near the top
- Double-hairline plaque container — outer frame, inset inner hairline and a short rose top-rule accent, no shadows
- Reduced-motion support that neutralises transitions

## Accessibility

- **ARIA roles** — Bar uses `role="progressbar"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
- **Value semantics** — `pbApplyProgress` synchronises the authored value, readout and `aria-label` on load
- **Focus indicators** — `:focus-visible` with `--ring` outline
- **Reduced motion** — `prefers-reduced-motion: reduce` neutralises transitions
- **Viewport** — `100dvh` for mobile-safe viewport height

## Common questions

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

Progress Classic 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 Progress Classic free?**

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

**Does Progress Classic support dark mode?**

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

## Get the code

Preview Progress Classic 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-classic

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