Loading state — agent waiting variants (HTML/CSS)

Installation

tokens.css + loading-state.css + host-chrome.css

head.html

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/loading-state/loading-state.css">

Mark

Preview

Code

loading-state.html

<div class="au-thinking-indicator" role="status" aria-live="polite"><span class="sr-only">Thinking…</span><svg class="au-thinking-indicator__mark" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 12c2-3.5 7-3.5 7 0s-5 3.5-7 0-7-3.5-7 0 5 3.5 7 0z"/></svg><span class="au-thinking-indicator__label au-thinking-indicator__label--shimmer" aria-hidden="true">Thinking</span></div>

Dots

Preview

Agent is thinking

Code

loading-state.html

<div class="au-thinking-indicator" role="status" aria-live="polite"><span class="au-thinking-indicator__dots" aria-hidden="true"><span></span><span></span><span></span></span><span class="au-thinking-indicator__label">Agent is thinking</span></div>

Drive

Preview

Working

0.0s

Code

loading-state.html

<div class="au-loading" data-au-variant="drive" data-au-component="loading-state" role="status" aria-live="polite"><span class="au-loading__mark" aria-hidden="true"></span><p class="au-loading__label">Working</p><p class="au-loading__time">0.0s</p></div>

Orbit

Preview

Working

1.2s

Code

loading-state.html

<div class="au-loading" data-au-variant="orbit" data-au-component="loading-state" role="status" aria-live="polite"><span class="au-loading__mark" aria-hidden="true"></span><p class="au-loading__label">Working</p><p class="au-loading__time">1.2s</p></div>

Pill

Preview

Running

Code

loading-state.html

<span class="au-status-pill" data-au-component="loading-state" data-au-variant="pill" data-au-state="running">Running</span>

Component contract

Install: tokens.css · loading-state.css · host-chrome.css
States: running and streaming; pill uses status states success/error/etc
Host: when waiting starts/ends and elapsed time

For agents

loading-state.contract

# agent-ui / loading-state
component: loading-state
selector: .au-loading-state
data_au_component: loading-state
purpose: Waiting/activity with variants drive | dots | orbit | mark | pill (absorbs thinking-indicator, status-pill).

install:
  - tokens.css
  - loading-state.css
  - host-chrome.css for shimmer labels

states: running and streaming; pill uses status states success/error/etc.
css_variables: No component-specific variables.
events: native form, focus, and click only — no custom events or runtime required
no_javascript: Labels remain understandable without animation.
host_owns: The host owns when waiting starts/ends and elapsed time.
accessibility: Use role=status and aria-live=polite for loaders.
security: Does not imply authorization or success.

rules:
  - Host owns execution, authorization, persistence, validation, and state transitions.
  - Components render host-provided state; they never execute tools or imply approval.
  - Escape untrusted model output, tool args, and tool output before insertion.
  - Use only documented data-au-* attributes and data-au-state values.
  - Keep the no-JS path usable. Do not add React, Tailwind, bundlers, or remote assets.
source: components/loading-state/loading-state.{html,css} + README.md + fixture.html