Indeterminate Bar

Features

• Continuously sweeping fill segment driven purely by transform: translateX in a @keyframes loop
• Indeterminate semantics — role="progressbar" with no aria-valuenow for unknown-duration work
• Simulated lifecycle that resolves from loading into a real completion state
• Automatic transition to an animated success checkmark and filled bar when loading finishes
• Restart control to replay the loading sweep on demand
• Sweep pauses and hides on completion via a single panel state class
• Responsive panel that adapts padding down to 280px
• Fully respects prefers-reduced-motion

Accessibility

Indeterminate progress

role="progressbar" with no aria-valuenow — signalling unknown-duration work — and a descriptive aria-label

Busy state

aria-busy toggled to true while sweeping and false on completion

Live status

aria-live="polite" on the panel announces title and status changes

Keyboard activation

Restart is a native button, operable with Enter and Space

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables the sweep and all animations

Customise it with AI

Open Indeterminate Bar in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the loader 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.