Progress Indeterminate

Features

• A single indeterminate progress bar for work of unknown duration
• Endless sweep animates only transform (translateX) — no layout or paint thrash
• A soft, fully pill-rounded track with a gradient sweep fill
• A "Loading…" status row with a breathing accent dot (opacity only)
• A quiet ghost pause/resume button that freezes the sweep and dot via animation-play-state
• role="progressbar" with a descriptive aria-label (no value — indeterminate)
• Unframed "atrium" identity: the label, hint, bar, status and button float on a calm mint vertical wash, marked by a thin vertical accent rule instead of a card
• Reduced-motion support that freezes the sweep and dot in a static state

Accessibility

ARIA role

The bar uses role="progressbar" with a descriptive aria-label

Indeterminate

No aria-valuenow — the bar communicates unknown progress

Pause button

Native <button type="button"> with aria-pressed and an aria-label that swaps between "Pause loading animation" and "Resume loading animation"

Status text

Visible status swaps "Loading…"/"Paused" in sync with the button

Keyboard

Enter/Space activate the focused pause button (native button)

Focus indicators

:focus-visible with --ring outline

Reduced motion

prefers-reduced-motion: reduce freezes the sweep and dot

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

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