The delivered mark in motion: its leaves and its tower move, so that waiting looks like the product.
While it waits
Each loader at 64, 32 and 16 px, and what it is for.
Rise.ld--rise
The tower builds itself — body, collar, crown light up in turn — over the still leaves.
A panel or a card loading: a tab of the Site page, a register.
Beat.ld--beat
The whole mark pulses once a cycle, a little smaller and back.
At 16 px: a button at work, a row, a field.
Sway.ld--sway
The two leaves fade in turn, left then right, under the still tower.
A long wait with words beside it: reading a document, running a lead source.
Draw.ld--draw
The leaves are drawn as outlines, then filled; the tower appears last.
The application starting, on the brand colour.
When the share is known
The mark that fills as the work goes.
0%
33%
67%
100%
When the share is known — an import, a batch of emails — the mark fills from the bottom as the work goes, with the figure beside it; at 100% it is the mark at rest.
Where they stand
A button, a panel, a long wait, the start of the application.
A button at work
A panel loading
Loading the offers on Church Farm…
A long wait
Reading the decision notice
This can take a minute. You can leave this page; the values will wait for your approval.
An import with its share
Importing Sales Master — South & West
1,240 of 3,600 rows · 34%
Valere CRM is starting…
Rules
When a loader shows, the words beside it, reduced motion.
Not at once: a loader shows only after 400 ms, so a quick answer never flashes it.
In place of what is coming — the tab’s content, the button’s label — never as a page-wide overlay over work already on screen.
With words beside it from 32 px up, in the product’s terms: what is loading, and how long it may take when it is long.
The words sit in a role="status" region, so a screen reader announces them once.
Still under reduced motion: every loader stops on the mark at rest, beside its words.