02
Story
When the AI takes more than a few seconds before it answers, I want to see what it is doing right now, so I know it is working on the right thing and can decide whether to wait.
Dev, a product manager, asking for a launch plan from 3 files on his laptop.
- 01 Setting
Dev attaches 3 files and asks for a launch-week plan.
- 02 Trigger
The AI needs 10 seconds or more before it can write anything.
- 03 Without it
A spinner with no words. After 6 seconds Dev wonders if it is stuck, and asks again.
- 04 With it
Each step names what is happening - reading the files, checking the dates - with a timer beside it.
- 05 Outcome
The steps fold into 1 line when the answer starts. Dev trusts the plan because he saw the date check.
03
Live demo
This demo follows a script, so it plays the same every time - there is no real AI behind it. Change a setting to see the same moment play out differently.
Work
When done
Device
04
What happens, step by step
| State | The person sees | The AI is | When | Screen reader |
|---|---|---|---|---|
| 1 | The ask, and nothing else yet. | Starts work. | 0 s | - |
| 2 | A Thinking header, a timer and the first step in plain words. | Reads the input. | within 1 s | “Thinking” |
| 3 | Done steps get a tick; the current one pulses; the next one is faint. | Works step by step. | every 1-3 s | - |
| 4 | The last step runs. The timer keeps counting. | Checks its work. | - | - |
| 5 | The steps fold into 1 line - or stay open if set. The answer streams (arrives word by word) below. | Writes the answer. | on the first word | - |
| 6 | 1 line, "Thought for 8 s · 5 steps", that opens the steps again. | Idle. | - | “Response complete” |
05
On each device
- phone
- Show only the current step, on 1 line, with the timer. The full list opens in a sheet (a panel that slides up from the bottom). When the answer starts, fold to 1 line so the answer gets the screen.
- tablet
- The full list fits above the answer. Fold it when the answer starts.
- desktop
- The list sits above the answer. For a long run by an agent (an AI that can take actions for you), it sits in a side panel. Each done step can open to show what it found.
06
When to use it
Use when
- The AI regularly takes more than about 3 seconds before the first word.
- The work has real stages people would recognise: reading, searching, checking, drafting.
- Seeing the steps helps people judge the answer - for example, which files or sites it used.
Don’t use when
- Answers start in under a second - streaming alone is enough. Use Streaming response instead.
- There is only 1 stage. Say what it is instead of inventing steps. Use Specific loading messages instead.
- The work runs for minutes while people do something else. Use Long-running tasks and notifications instead.
07
The parts of the pattern
- ATimerProves time is passing and sets an expectation for next time.
- BCurrent stepNames what is happening now, in plain words, and pulses gently.
- CDone stepA tick, so progress is visible at a glance.
- DNext stepFaint, so people see what is still to come.
- EOpen a stepShows what the step found - files, dates, sources.
08
Do and Avoid
- ✓ Reading the 3 files you attached
- Checking the dates against the calendar
- ✓ Processing
- Analysing
› Thought for 8 s · 5 steps
Here is your launch week: lock the build Monday…
- ✓ Reading the files
- ✓ Checking the dates
- ✓ Comparing… (+3 more)
The answer is below the fold.
09
Writing and accessibility
Writing
- Start each step with a verb and name the thing: "Reading the 3 files you attached", not "Processing".
- Use the person's own nouns - their file names, their dates, the sites it is searching.
- When done, say how long it took: "Thought for 8 s". People learn what to expect.
- Never claim the steps are the AI's full reasoning. If they are a summary, say so.
Accessibility
- Announce only the start ("Thinking") and the end ("Response complete") - not every step.
- The folded line is a real button with aria-expanded (the code that tells a screen reader if it is open or closed), so people can open the steps again.
- Under reduced motion (a device setting that turns off animation), the pulse on the current step stops. The tick and the words carry the meaning.
- Screen readers do not read the timer every second. It is on screen only.
10
Seen in real products
- ClaudeWeb · Oct 2026A timer and a collapsible thinking section sit above the answer. Opening it shows a summary, not the full chain, and thinking can stop early when safety flags it.Claude Help: Extended thinking (14 Jan 2026) ↗
- GeminiWeb and apps · Oct 2026A Task opens a work panel listing completed, current and planned steps, with a progress chip that reopens it.Gemini Help: Tasks ↗
- PerplexityWeb · Jun 2026A collapsed "Completed N steps" row opens into plain-language steps such as "Searching the web".AI UX Playground teardown, Jun 2026 ↗
- ChatGPTWeb first · Sep 2025Thinking time can be set to Standard or Extended (Light and Heavy on Pro). It launched on the web, with mobile to follow.TechRadar, 18 Sep 2025 ↗
Each example comes from the product’s help pages, release notes or teardowns, with the month it was checked. Products change every month - tell us when 1 is out of date.
12
Check yourself
Sources
Suggest an edit
Seen this pattern done better, or a product that changed? Press Suggest next to any heading, or tell us about the whole page.