20 CSS Loaders 15 / 20

CSS Orbit Planet Loader

Three space-themed CSS loaders — a multi-orbit solar system, a conic-gradient comet trail, and binary orbiting stars — evoking astronomy dashboards and data pipeline visualisations.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="ld-15">
  <div class="ld-15__stage">
    <div class="ld-15__cell">
      <div class="ld-15__solar">
        <div class="ld-15__sun"></div>
        <div class="ld-15__orbit-ring"><div class="ld-15__planet"></div></div>
.ld-15,.ld-15 *,.ld-15 *::before,.ld-15 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-15{
  --bg:#01020a;--c1:#4fc3f7;--c2:#f48fb1;--c3:#a5d6a7;--c4:#ffe082;--c5:#cf94da;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-15__stage{display:flex;gap:80px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:center}
.ld-15__cell{display:flex;flex-direction:column;align-items:center;gap:24px}
.ld-15__label{color:rgba(255,255,255,.3);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Multi-orbit solar */
.ld-15__solar{width:120px;height:120px;position:relative;display:flex;align-items:center;justify-content:center}
.ld-15__sun{width:18px;height:18px;border-radius:50%;background:var(--c4);box-shadow:0 0 16px var(--c4),0 0 32px rgba(255,224,130,.3)}
.ld-15__orbit-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.ld-15__orbit-ring:nth-child(2){width:44px;height:44px;animation:ld-15-orbit 1.2s linear infinite}
.ld-15__orbit-ring:nth-child(3){width:72px;height:72px;animation:ld-15-orbit 2s linear infinite}
.ld-15__orbit-ring:nth-child(4){width:100px;height:100px;animation:ld-15-orbit 3s linear infinite}
.ld-15__planet{position:absolute;border-radius:50%;top:-5px;left:50%;transform:translateX(-50%)}
.ld-15__orbit-ring:nth-child(2) .ld-15__planet{width:8px;height:8px;background:var(--c1);box-shadow:0 0 6px var(--c1)}
.ld-15__orbit-ring:nth-child(3) .ld-15__planet{width:10px;height:10px;background:var(--c2);box-shadow:0 0 8px var(--c2)}
.ld-15__orbit-ring:nth-child(4) .ld-15__planet{width:7px;height:7px;background:var(--c3);box-shadow:0 0 6px var(--c3)}
@keyframes ld-15-orbit{to{transform:rotate(360deg)}}

/* Comet orbit */
.ld-15__comet-orbit{width:90px;height:90px;position:relative}
.ld-15__comet-orbit::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.06)}
.ld-15__comet-dot{width:10px;height:10px;border-radius:50%;background:var(--c5);box-shadow:0 0 10px var(--c5);position:absolute;top:-5px;left:50%;transform:translateX(-50%);transform-origin:45px 50px;animation:ld-15-orbit 1.8s linear infinite}
.ld-15__comet-trail{position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 75%,rgba(207,148,218,.3));animation:ld-15-orbit 1.8s linear infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 2px),#000 0)}

/* Binary stars */
.ld-15__binary{width:90px;height:90px;position:relative;display:flex;align-items:center;justify-content:center}
.ld-15__binary-wrap{width:60px;height:60px;position:relative;animation:ld-15-orbit 2s linear infinite}
.ld-15__star{position:absolute;border-radius:50%;top:50%;transform:translateY(-50%)}
.ld-15__star:nth-child(1){left:0;width:14px;height:14px;background:var(--c4);box-shadow:0 0 10px var(--c4);margin-top:-7px}
.ld-15__star:nth-child(2){right:0;width:10px;height:10px;background:var(--c1);box-shadow:0 0 8px var(--c1);margin-top:-5px}

@media(prefers-reduced-motion:reduce){
  .ld-15__orbit-ring,.ld-15__comet-dot,.ld-15__comet-trail,.ld-15__binary-wrap{animation:none}
}

How this works

The solar system uses three concentric border-radius:50% rings, each with a rotate(360deg) animation at different speeds (1.2s, 2s, 3s) and a planet div absolutely positioned at top:-5px; left:50%; transform:translateX(-50%). Because the planet is a child of the rotating ring, it orbits the sun automatically without any extra positioning math. The box-shadow glow on each planet is applied directly so it travels with the planet.

The comet trail wraps a spinning conic-gradient(transparent 75%, rgba()) element behind a solid dot child, both sharing the same animation. The gradient arc acts as a persistent tail — as the container spins, the arc rotates with it while the dot always sits at the leading edge. The binary star uses a single wrapper that rotates, containing two dots offset to left and right — their orbital radii are implicitly defined by their left/right positions within the fixed wrapper.

Customize

  • Adjust orbital speeds by changing animation-duration per ring — use Kepler's third law ratio (inner orbit fastest) for an astronomically accurate feel.
  • Add a ring glow by giving the orbit ring element a box-shadow: 0 0 6px rgba(255,255,255,.05) to make the invisible orbit path faintly visible.
  • Increase comet tail length by changing the transparent stop from 75% to 60% — a smaller transparent portion means a longer visible arc.
  • Add a planet wobble by applying a subtle scaleX(0.9) animation to each planet element independently of its parent orbit ring rotation.
  • Create an asteroid belt by adding a ring with many small dots at random positions — use nth-child selectors with different transform-origin values on a shared orbit ring.

Watch out for

  • Planet positioning uses top:-5px; left:50%; transform:translateX(-50%) which centres the planet on the ring's top edge — if the planet size changes, update the top offset to -(planetSize/2)px.
  • The comet -webkit-mask radial gradient must match the conic-gradient element's size — if sizes differ, the mask clips the arc at the wrong radius.
  • Binary star wrappers using a single rotation must have both star dots at equal distances from the centre on the horizontal axis — asymmetric placement produces an eccentric wobble rather than a true binary orbit.

Browser support

ChromeSafariFirefoxEdge
69+ 12.1+ 83+ 69+

Conic-gradient requires Safari 12.1+; the orbit technique itself works in all modern browsers.

More from 20 CSS Loaders

CSS Progress Bar LoaderCSS Bouncing Balls LoaderCSS DNA Helix LoaderCSS Glitch Flicker LoaderCSS Heartbeat Pulse LoaderCSS Circular Progress LoaderCSS Liquid Fill LoaderCSS Neon Arc SpinnerCSS Cube Flip 3D LoaderCSS Wave Bars Audio LoaderCSS Morphing Square LoaderCSS Typing Dots Loader
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →