CSS Animation Examples | Bouncing Circle Step CSS Loader

Last Updated: 2025-09-02 14:13:34

This CSS loader combines a bouncing circle and a step block animation to create a lively loader effect. The design is minimal and works well in modern web projects. It’s responsive, lightweight, and visually appealing for users waiting on content to load. You can download the complete source code.

How does this CSS Animation work

◈ Body setup: We use flexbox to center the loader vertically and horizontally. Background color is applied for better contrast.

◈ Loader container: Defines the size and relative position of the loader, providing a reference for pseudo-elements.

◈ Bouncing circle: Uses :before pseudo-element to create the circle with background color and border radius, then animates it with loading-bounce.

◈ Circle animation: Keyframes make the circle scale and bounce up, providing a lively motion.

◈ Step blocks: The :after pseudo-element creates multiple rectangles using box-shadow, simulating steps.

◈ Step animation: The keyframes shift shadows over time, giving the appearance of a moving step animation.

◈ Border-radius & shadow: Rounded edges for both circle and steps make the loader visually smooth.

◈ Animation timing: ease-in-out timing ensures smooth acceleration and deceleration in motion.

◈ Infinite loops: Both animations loop infinitely to maintain the loading effect until content is ready.

◈ Separation of concerns: Using pseudo-elements keeps HTML clean while providing all animation purely with CSS.

/* Body and loader container */
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #f8f9fa; }
.loader { position: relative; width: 120px; height: 90px; margin: 0 auto; }

/* Circle bounce animation */
.loader:before { content: ""; position: absolute; bottom: 30px; left: 50px; height: 30px; width: 30px; border-radius: 50%; background: #2a9d8f; animation: loading-bounce 0.5s ease-in-out infinite alternate; }

/* Step block animation */
.loader:after { content: ""; position: absolute; right: 0; top: 0; height: 7px; width: 45px; border-radius: 4px; box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2; animation: loading-step 1s ease-in-out infinite; }

/* Circle keyframes */
@keyframes loading-bounce { 0% { transform: scale(1, 0.7); } 40% { transform: scale(0.8, 1.2); } 60% { transform: scale(1, 1); } 100% { bottom: 140px; } }

/* Step keyframes */
@keyframes loading-step { 0% { box-shadow: 0 10px 0 rgba(0,0,0,0), 0 10px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 90px 0 #f2f2f2; } 100% { box-shadow: 0 10px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 90px 0 #f2f2f2, -70px 90px 0 rgba(0,0,0,0); } }

You can download the complete source code.

 

This loader is a simple yet elegant way to show loading progress using only CSS. The combination of bouncing and step animations makes it visually engaging. Its clean structure ensures it’s easy to integrate and customize for any project.