Saphyroo loader, A + D + E + H + G

System down to two: A for utility, D for branded. C dropped. D's ring slimmed.

The brand vibe: serious utility (operators stare at this all day) plus forward motion (the mark is angular, fleet is moving) plus calm confidence (chrome, not look-at-me). Distinct from generic Linear-arc, never fussy.
Sizing system:
SizeVariantWhere
16pxAInside buttons (Saving, Sending)
24pxAResync, table refetch overlay, dialog content, inline empty-state
32pxDSection-level loading (route detail, settings panels)
48px+DFull-page first-paint, auth splash

Build stamp: 5 variants — A + D + E + H + G. Mark is a kangaroo (east AU, energy = motion). Saphyroo signature: kangaroo hop on every orbit cycle. Compress (72%) → leap with stretch (82%) → descent (92%) → land (100%). Magnitude scales with size. Applies to E, H, G (anywhere there's an orbit). Timings on 200ms primitive. Reduced-motion fallback live.

The four tells fixed in this build: (1) bespoke micro-detail via cubic-bezier(0.45, 0, 0.55, 1) easing instead of pure linear, (2) brand pair restored via 1-stop terracotta kiss on D's leading edge + terracotta dot on E, (3) per-size comet trail length on D so motion feels right at every scale, (4) faint backdrop glow on D-48/72 for depth at large sizes. The mark-at-small-sizes tell is unfixed: needs a brand-identity workstream, not a CSS pass.

A, utility arc

CSS rotating arc, no brand mark. For 16/24px and inline utility states.

Light surface
16
24
32
48

Inline in a button

Empty table refetching

RouteDriverStatus

Loading allocations

Dark surface
16
24
32
48

Empty table refetching

Loading allocations

A, confirmed for utility states.
  • Already shipped on the Allocations resync (sprints#2718).
  • Pixel-crisp at every size; pure CSS borders.

D, comet ring + mark (0.85s, slimmed ring)

Static brand mark in centre, comet-trail ring orbiting it. Conic gradient masked into a thin ring, single brand colour from transparent to full saturation.

Light surface
32
48
72

Full-page first-paint

Loading Drive360

Section panel loading (32px)

Loading route details

Dark surface
32
48
72

Full-page first-paint

Loading Drive360

D, iterated against the tells.
  • Ring widths 1.5 / 2 / 2.5 px at 32 / 48 / 72 (mask geometry fixed).
  • Terracotta kiss on the comet's leading edge, brand pair restored.
  • Per-size trail length: shorter at 32 (130deg start), longer at 72 (50deg start).
  • Almost-linear easing (cubic-bezier 0.45, 0, 0.55, 1) instead of pure linear.
  • Faint backdrop glow on 48/72 for depth at large sizes.

E, ambient track + dot + mark (1.1s, single dot)

Always-visible faint mint track, single bright terracotta dot orbiting on it, static brand mark in centre. Apple Watch / ping-radar feel. Calmer than D, more confident, uses the brand pair explicitly.

Light surface
32
48
72

Full-page first-paint

Loading Drive360

Section panel loading (32px)

Loading route details

Dark surface
32
48
72

Full-page first-paint

Loading Drive360

E, brand-pair role separation.
  • Three layers: ambient track (mint, 14% opacity, always visible) + orbiting dot (terracotta deep, 6deg arc) + static mark (mint).
  • Brand pair sings: mint and terracotta in clear roles, not one dominating.
  • Saphyroo signature: kangaroo hop. Every orbit cycle the mark compresses, leaps with a slight vertical stretch, lands. Mirrors actual kangaroo locomotion. Conceptual: the kangaroo (mark) is hopping on home ground; the orbit dot is territory passing under it. Magnitude scales with size.
  • Single bright point doing the motion = calmer than D's gradient comet. Reads more confident.
  • Heartbeat feel from the ease curve (subtle slow at top + bottom).

H, E inverted (terra track + mint dot)

Same structure as E, brand-pair roles flipped. Terracotta deep at 18% as ambient track; mint at full saturation as the orbiting dot; mark stays mint. Reads "warm Aussie outback" — same calm, different emotional register.

Light surface
32
48
72

Full-page first-paint

Loading Drive360

Section panel loading (32px)

Loading route details

Dark surface
32
48
72

Full-page first-paint

Loading Drive360

H, the warm-Aussie alternative.
  • Terracotta deep ambient track — feels like outback dirt, sunbaked.
  • Mint dot does the motion — same role separation as E, opposite colour direction.
  • Kangaroo-hop signature inherited from E.
  • Reads warmer than E, slightly more "Saphyroo Australia" than "Saphyroo platform". Different positioning lever.

G, E + thinking mark (orbit + 300ms shake every 3s)

Same as E (ambient mint track + orbiting terracotta dot + static mark) but the centre mark itself briefly glitches every 2.4s, like the system is thinking. Ghosts (terracotta + light mint) flash for ~70ms with horizontal-slice clip and 1-2px displacement. Calm orbit underneath, alive mark on top.

Light surface
32
48
72

Full-page first-paint

Loading Drive360

Section panel loading (32px)

Loading route details

Dark surface
32
48
72

Full-page first-paint

Loading Drive360

G, E with a thinking mark.
  • Inherits everything E does: track, orbiting dot, brand pair, calm orbit speed.
  • Adds: the centre mark briefly glitches every 2.4s — terracotta and light-mint ghosts flash for 70ms with horizontal-slice clip-path and 1-2px shift.
  • Reads as "the system is alive, thinking" — not "the app is broken" because the orbit stays calm and the glitch is brief (1.6% of cycle).
  • Best for full-page first-paint where the user is waiting on real compute. May be too much for everyday in-page loads.