Progress Gradient

Features

• A single gradient determinate progress bar inside a split-tone card
• Orange-to-amber gradient fill built from --pb-grad-start/--pb-grad-end tokens
• A soft light sheen sweeps across the fill via a transform: translateX pseudo-element
• Fill length driven by a --pb-prog custom property, animated with a clip-path reveal so the sheen never distorts
• Static upload progress authored through aria-valuenow, with no fake increment/decrement controls
• Gradient-clipped percent readout that stays in sync with the bar and its aria-valuenow
• Split-tone panel: a brand-tinted header band over a plain surface body, split by a hairline divider
• A soft diagonal sunset-wash backdrop built from the gradient tokens, with a designed dark twin
• role="progressbar" with an authored aria-valuenow and explicit bounds
• Reduced-motion support that stops the sheen, entrance and step animations

Accessibility

ARIA roles

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

Value semantics

The initial script synchronises the authored value, readout and aria-label on load

Focus indicators

:focus-visible with --ring outline

Reduced motion

prefers-reduced-motion: reduce stops the sheen, entrance and step animations

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

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