Inline Loaders

01 — Placeholder
A metric that hasn’t arrived renders the loader where the number will go. When the value lands, it replaces the loader in place.
Impressions
⠋⠉⠙⠚
Clicks
⠋⠉⠙⠚
Click-through rate
⠋⠉⠙⠚
Spend
⠋⠉⠙⠚
Conversions
⠋⠉⠙⠚
Cost per acquisition
⠋⠉⠙⠚
02 — Running tasks
Each task is a mini terminal window. While it runs, a prompt line animates beneath its output.
sync-audiences
fetching 412 segments
diffing against store
writing 38 updates
$ ⠋⠉⠙⠚
watch-campaigns
polling every 30s
no drift detected
$ ⠋⠉⠙⠚
03 — Agent activity
The full spinner set as an agent’s terminal output.
⠋⠋⠋⠋ Thinking﹒ (0ms)
⠁⠂⠄⡀ Pondering﹒ (0ms)
⠋⠉⠙⠚ Reasoning﹒ (0ms)
⠀⠀⠀⠀ Analyzing﹒ (0ms)
⢁⠂⠔⠈ Processing﹒ (0ms)
⠉⠉⠉⠉ Computing﹒ (0ms)
⠀⠰⠆⠀ Evaluating﹒ (0ms)
⠉⠉⠀⠀ Reflecting﹒ (0ms)
⡡⠊⢔⠡ Deliberating﹒ (0ms)
⠀⠀⠀⠀ Considering﹒ (0ms)
⡀⠀⠀⠀ Contemplating﹒ (0ms)
⠃⠃⠃⠃ Mulling﹒ (0ms)
⠀⠀⠀⠀ Deducing﹒ (0ms)
⠖⠉⠉⠑ Inferring﹒ (0ms)
⢕⢕⢕⢕ Examining﹒ (0ms)
⢌⣉⢎⣉ Synthesizing﹒ (0ms)
⣀⣀⣀⣀ Assessing﹒ (0ms)
⠁⠀⠀⠀ Ruminating﹒ (0ms)
This is an open source example. Take the code and remix it!

View source