Progress Pulse

Features

• A single soft, rounded determinate progress bar with a design-system gradient fill
• A calm opacity pulse that makes the fill breathe (opacity keyframe only — no layout thrash)
• Static upload progress seeded from data-progress, with no fake increment/decrement controls
• Determinate fill sized from a data-progress seed and animated with a transform scaleX transition (never a width transition)
• role="progressbar" with synchronized aria-valuenow, aria-valuetext and an accessible task label
• Both the task label and visible percentage use the theme's guaranteed primary foreground; accents remain concentrated in the fill and ambient blooms
• Asymmetric radial blooms and a tinted card whose radius and elevation propagate from the active design system
• Reduced-motion support that stops the pulse and neutralizes the transform transition

Accessibility

ARIA role

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

Accessible name

The card and progress bar reference the visible <h1> task label through aria-labelledby

Value semantics

pbApplyProgress() synchronises the authored value, readout, aria-valuenow and aria-valuetext on load

Decorative value

The visible percentage carries aria-hidden="true" and stays in sync with the bar's aria state

Focus indicators

:focus-visible with --ring outline

Reduced motion

prefers-reduced-motion: reduce stops the pulse and neutralizes transitions

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

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