20 CSS Loaders15 / 20

Pure CSSMIT licensed

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.

Published

Live Demo
Try it

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

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;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Loader from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Orbit Planet Loader
Source: https://codefronts.com/motion/css-loader-designs/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.
## HTML
```html
<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>
```
## CSS
```css
.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.

Make it yours

  • 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.

Gotchas — read before shipping

  • 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.

Techniques used in this demo

conic-gradient()MDN ↗radial-gradient()MDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →