Progress Classic

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

Customise it with AI

Open Progress Classic 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.