OneTaskBy Tim King · Updated
Orbit Animation
CSS Planets Orbiting a Sun Generator
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Orbit Animation works
This orbit animation generator draws a small solar system: a glowing sun with planets circling it on dashed rings, the inner ones faster than the outer. Set the number of orbits, planet colours and size, the sun and ring colours and the speed, then copy the HTML and CSS.
Orbits make a lively loader, a space-themed hero or a diagram of things that revolve around one idea.
How the orbit animation works
Each orbit is a circular ring element that spins with rotate. The planet is a ::before dot fixed
to the top of the ring, so as the ring turns the planet travels round the circle. Inner rings get
shorter loop times, so they lap the outer ones as real planets do.
Using orbits as a loader
With one or two orbits and a small size, the animation works as a loading indicator. Add a visually hidden "Loading" message for screen readers, as the orbit itself is hidden from them.
FAQ
How do I put icons on the orbits instead of dots?
Replace the ::before dot with a child element holding your icon, positioned at the top of each ring. Rotate the icon in the opposite direction if you want it to stay upright.
Can the planets move in different directions?
Yes. Add animation-direction: reverse to any ring and that planet travels anticlockwise while the others carry on clockwise, which makes a busier and more mechanical looking system.
Does the orbit animation stop for reduced motion?
Yes. The copied CSS includes a prefers-reduced-motion rule that stops the rings, so visitors who ask for less motion see the planets resting in place around the sun.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Loading Spinner
Design a CSS loading spinner and copy the code.
Starfield Background
Make stars stream past as if flying through space.
Gooey Effect
Liquid metaball blobs that merge and split, with an SVG filter.
CSS Shapes Generator
Classic single-element CSS shapes with size and colour controls.
Keyframe Animator
Build and preview a CSS @keyframes animation from three stops.