Globe Loader

Category: loaders. A breathing globe with counter-rotating orbit rings and a pulsing wordmark. Pure SVG + CSS, zero JavaScript, ~1 KB of markup.

Light theme Animation pauses under prefers-reduced-motion.

Loading…

Use it. Link the stylesheet, drop in the markup, and (optionally) wrap in .motion--light for the light palette:

<link rel="stylesheet" href="/assets/motion/motion.css">

<div class="motion-scope">
  <svg class="motion-globe" viewBox="0 0 120 120" aria-hidden="true">
    <ellipse class="mg-orbit mg-orbit--cw"  cx="60" cy="60" rx="48" ry="16" />
    <ellipse class="mg-orbit mg-orbit--ccw" cx="60" cy="60" rx="40" ry="22" />
    <circle  class="mg-core" cx="60" cy="60" r="24" />
    <ellipse class="mg-grid" cx="60" cy="60" rx="9"  ry="24" />
    <ellipse class="mg-grid" cx="60" cy="60" rx="24" ry="9" />
    <line    class="mg-grid" x1="36" y1="60" x2="84" y2="60" />
    <circle  class="mg-sat"  cx="60" cy="12" r="3.4" />
    <text    class="mg-word" x="60" y="60" text-anchor="middle" dominant-baseline="central">Sev</text>
  </svg>
  <span role="status">Loading…</span>
</div>

Size with --motion-globe-size (default 120px). Speed with --motion-speed (e.g. 0.5 = half speed). Decision record: SevIQ/docs/adr/0001-svg-css-motion-basics.md.