Back

Creating a Dynamic Orbital Loading Animation

Learn how to build an engaging, planet-like orbital loader with rotating circles using CSS transforms and animations.

HTML

The HTML structure for our orbit loader creates a celestial-inspired design with a center circle and orbiting satellites. We begin with a main container with the class "orbit-loader". Inside, we have a central element ("center-circle") representing the focal point, and three orbit paths ("orbit"), each containing a satellite element that will revolve around the center.


        <div class="orbit-loader">
          <div class="center-circle"></div>
          <div class="orbit orbit-1">
            <div class="satellite satellite-1"></div>
          </div>
          <div class="orbit orbit-2">
            <div class="satellite satellite-2"></div>
          </div>
          <div class="orbit orbit-3">
            <div class="satellite satellite-3"></div>
          </div>
        </div>

CSS

Let's start by setting up our loader container. This creates a 100×100px area that serves as the boundary for our orbital system.


        .orbit-loader {
            position: relative;
            width: 100px;
            height: 100px;
        }

Next, we style the center circle. This blue circle (20×20px) serves as the focal point of our orbital system. We position it exactly in the center using absolute positioning combined with the transform property, and give it a higher z-index to ensure it appears above the orbital paths.


        .center-circle {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #3B82F6;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }

Now, let's style the orbit paths. These are circular borders that represent the trajectories of our satellites. We use a semi-transparent blue color to create subtle orbital rings, perfectly centered around our main circle.


        .orbit {
            position: absolute;
            border: 1px solid rgba(59, 130, 246, 0.2);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

Each orbit has a different diameter and animation duration, creating a harmonious, varied motion pattern. We use the "reverse" keyword for the middle orbit to create more visual interest as it rotates in the opposite direction.


        .orbit-1 {
            width: 40px;
            height: 40px;
            animation: spin 2s linear infinite;
        }

        .orbit-2 {
            width: 60px;
            height: 60px;
            animation: spin 3s linear infinite reverse;
        }

        .orbit-3 {
            width: 80px;
            height: 80px;
            animation: spin 4s linear infinite;
        }

The satellites are small circles positioned at the top of each orbit. We use different shades of blue for visual hierarchy, with the closest satellite being the darkest and the furthest being the lightest.


        .satellite {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #3B82F6;
            border-radius: 50%;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
        }

        .satellite-2 {
            background-color: #60A5FA;
        }

        .satellite-3 {
            background-color: #93C5FD;
        }

The animation is defined using the @keyframes rule. We rotate each orbit from 0 to 360 degrees while maintaining its centered position using the translate function in combination with rotate. The circular motion creates a hypnotic, perpetual movement that effectively communicates an ongoing process to the user.


        @keyframes spin {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }
            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

This orbital loader offers a refreshing alternative to traditional spinners, with several key advantages: - Visual interest: The multi-layered, counter-rotating orbits create a complex yet harmonious motion that captures attention without being distracting. - Perceived efficiency: The continuous, fluid movement gives users the impression of active processing even during longer waits. - Scalability: The loader can be easily scaled up or down using CSS, and additional orbits can be added for more complex visualizations. - Customization: The colors, sizes, and speeds can be adjusted to match your application's theme and loading context. By creating a sense of ordered motion and cosmic harmony, this loader elevates the waiting experience from a frustration to a moment of visual delight.

Whole code

<div class="orbit-loader">
  <div class="center-circle"></div>
  <div class="orbit orbit-1">
    <div class="satellite satellite-1"></div>
  </div>
  <div class="orbit orbit-2">
    <div class="satellite satellite-2"></div>
  </div>
  <div class="orbit orbit-3">
    <div class="satellite satellite-3"></div>
  </div>
</div>

<style>
.orbit-loader {
  position: relative;
  width: 100px;
  height: 100px;
}

.center-circle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #3B82F6;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.orbit {
  position: absolute;
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.orbit-1 {
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}

.orbit-2 {
  width: 60px;
  height: 60px;
  animation: spin 3s linear infinite reverse;
}

.orbit-3 {
  width: 80px;
  height: 80px;
  animation: spin 4s linear infinite;
}

.satellite {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #3B82F6;
  border-radius: 50%;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.satellite-2 {
  background-color: #60A5FA;
}

.satellite-3 {
  background-color: #93C5FD;
}

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>

Thank you for reading this article.

Creating a Dynamic Orbital Loading Animation

HTML

CSS

Whole code

Comments

More loaders

Similar

See also