The logo set in motion: what the product shows while it waits, in a button, a panel and at start.
While it waits
Each loader at 64, 32 and 16 px, and what it is for.
Each loader is the Armillary itself: its parts — the axis, the equator, the zodiac band, the meridian — are grouped, and the animation moves them; nothing is redrawn. At 64 px the detailed drawing, at 32 and 16 px the simplified one, as the logo. The meridian never moves: it is the one fixed measure the rest turns against.
Sweep
64 px
32 px
16 px
What moves
The axis and its rings turn half a round inside the meridian and settle, again and again, like a hand going round a dial; the meridian stays still.
What it is for
Inside controls — a button at work, a field checking, a row saving. The one loader that reads at 16 px.
.ld--sweep
Orbit
64 px
32 px
16 px
What moves
The equator, then the zodiac band, tumble over on their line of nodes — the ring closes to a line and opens again — while the meridian holds.
What it is for
A panel or a section loading in place: a listing’s gallery, a table, a card. At 32 px.
.ld--orbit
Precession
64 px
32 px
16 px
What moves
The polar axis leans slowly from its tilt to the mirrored one and back, carrying the rings with it; the meridian stays where it is.
What it is for
A long wait someone else is answering — the authentication provider, a payment — at 64 px, with how long it may take.
.ld--precess
Assembly
64 px
32 px
16 px
What moves
The axis draws itself in, then the equator and the zodiac band; the meridian sets last with its graduations, the mark holds, and it fades to begin again.
What it is for
The application starting, on the brand color, at 64 px.
.ld--assemble
When the share is known
The mark that fills as the work goes.
Measure: the meridian fills clockwise from the north pole of the axis, across its graduations, as the work goes; the axis and the rings stand still — only the measure moves. A real app sets one value on the loader, --ld-progress from 0 to 1, and writes the figure beside it.
0%Nothing yet
33%A third
67%Two thirds
100%Done
At 32 and 16 px, on the simplified drawing: two thirds done.
The words arrive first; only the gallery waits, with Orbit at 32 px in the space the photo will fill, so nothing jumps when it comes.
A long wait — the authentication provider answering
Veritrace is checking your listingValmont & Fils Diver 300Usually under a minute.You can leave this page — we will let you know when the result is in.
Precession at 64 px: slow, for a wait of seconds to a minute; the words say who is working and how long it may take.
An upload with its share — photos 3 of 10
Uploading photos3 of 10
30%
Measure at 32 px for the whole upload, its figure beside it; Sweep at 16 px on the photo on its way.
The application starting
Loading…
On the brand color, Assembly at 64 px, the mark alone in the middle: the rings draw in and the meridian sets last. Shown only if the start takes longer than 400 ms.
Rules
When a loader shows, the words beside it, reduced motion.
Not before 400 ms (--duration-slow): a shorter wait shows nothing. Once shown, a loader stays at least 640 ms (--duration-slower), so it never flickers.
Words beside it, in the product’s words — what is being done (“Checking authenticity…”, “Loading photos…”), not “Please wait”. A long wait says how long it may take; a known share says it as a figure.
Inside a control only Sweep at 16 px: it takes the icon’s place, the label turns to the doing word, the control keeps its width and is disabled and aria-busy until the answer comes.
The size follows the place: 16 px in controls and rows, 32 px in panels, 64 px for a long wait and the start. One loader to a view.
When the share is known, Measure with its figure, not a loop.
Reduced motion: the still mark — the whole Armillary at rest — with “Loading…” or the words beside it. Nothing turns.
Never for longer than the wait it stands for: it goes the moment the work is done; when a wait passes what was said, the words say so and offer a way on.
The drawing is hidden from screen readers; the words sit in a role="status" region, so they are read once.
With reduced motion
Loading…
Every loader comes to rest on the whole mark: with reduced motion this is what each of them shows.