AI Thinking Loader
A status line that cycles through what the AI is doing right now
Reading your request…
Create an AI thinking loader: a dark pill-shaped card that narrates what the model is doing while it works. Content: a sparkle icon on the left plus one status line, cycling through phrases like "Reading your request…", "Scanning the sources…", "Connecting the dots…", "Drafting an answer…". Every 1.6s the current line slides up 8px and fades out while the next slides in from 8px below, over 280ms with easing cubic-bezier(0.22, 1, 0.36, 1). Use a monospace font for the status text. The sparkle icon gently rocks (rotate 0 → 12deg → -12deg → 0) and breathes (scale 1 → 1.15 → 1) on a 1.6s loop. A soft diagonal shimmer band (a transparent-to-accent-to-transparent linear gradient at ~14% opacity, 45% of the card wide) sweeps across the card from left to right every 2.2s. Accessibility: wrap the status line in aria-live="polite" so the changing text is announced. If prefers-reduced-motion is set, show a single static line with no shimmer, no icon motion, and no cycling. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.