CSS Animation Examples | Globe Toggle CSS Loader

Last Updated: 2025-09-02 14:14:00

This Globe CSS Loader is one of the most eye-catching css loader examples you can try. The loader creates a 3D-like spinning globe effect with alternating stripes and a glowing reflection. Along with the globe animation, it features a toggle switch that smoothly changes state, giving it a unique and interactive look. Best of all, you can download the complete source code and experiment with it in your own projects.

Source Code Explanation

Here’s a detailed breakdown of the main parts of this CSS loader:

◈ RotateBall Animation
This keyframe makes the globe move left to right, simulating rolling movement.

◈ MoveBall Animation
This animation shifts the inner striped background inside the globe, making it look like Earth’s rotation.

◈ Section-Center
The .section-center is positioned in the middle of the screen, and transitions make it smooth when effects change.

◈ Section-Path
This creates the track or base container in which the globe moves, with shadows and rounded edges for realism.

◈ Globe Shape
The .globe itself is a circle with a box-shadow. It’s animated with the rotateBall keyframes for realistic rolling.

◈ Globe Reflection (After)
A shiny reflection highlight is created using :after. This makes the globe appear glossy.

◈ Globe Inner Shadow (Before)
The :before pseudo-element gives the globe depth with an inset shadow, making it look 3D.

◈ Striped Wrapper
Inside the globe, multiple span elements form vertical stripes. The moveBall animation shifts them horizontally to mimic rotation.

◈ Switch Button
The #switch and #circle elements create a toggle button. The .switched class changes its position and colors dynamically.

 

/* Globe rolling animation */
@keyframes rotateBall {
  0% { transform: translateX(0); }
  50% { transform: translateX(162px); }
  100% { transform: translateX(0); }
}

/* Globe inner stripes animation */
@keyframes moveBall {
  0% { left: -462px; }
  50% { left: 0; }
  100% { left: -462px; }
}

/* Center container */
.section-center {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  transform: translateY(-50%);
}

Best of all, you can download the complete source code

 

This CSS Globe Loader with Switch is a modern and playful way to display a loading animation. It combines CSS loading animations with interactive elements, making it stand out compared to traditional loaders. Whether you are exploring css animation examples with source code or want to practice with css loader examples, this project is a great addition to your portfolio.