# Progress Indeterminate

> A calm, standalone indeterminate progress bar — an endless sliding sweep on a soft track with a quiet loading status and a breathing accent dot, animating only transform and opacity, fully token-driven and design-system agnostic.

- Category: Progress
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Runway
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: indeterminate, loader
- Page: https://builder.atheros.ai/components/progress-indeterminate
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_progress_indeterminate/preview-33fdfa928f4b.webp

## 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

## Keyboard shortcuts

- `Enter` — Pause/resume when the button is focused
- `Space` — Pause/resume when the button is focused

## Common questions

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

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

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

**Does Progress Indeterminate support dark mode?**

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

## Get the code

Preview Progress Indeterminate 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-indeterminate

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