Article Categories

Selected Reading

How to Design Fade balls loader Animation using CSS?

CSS Web Development Front End Technology

The CSS fade balls loader animation is a popular loading indicator that uses a series of circles or balls that fade in and fade out in sequence. This animation creates an engaging visual effect while content loads, keeping users informed about the loading progress.

Syntax

@keyframes fade {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.5); }
}

.loader-element {
    animation: fade duration ease-in-out infinite;
    animation-delay: delay-time;
}

Method 1: Single Ball Loader

This approach uses pseudo-elements to create two overlapping balls with different animation delays

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        text-align: center;
        padding: 2rem;
        font-family: Arial, sans-serif;
    }
    
    .single-ball-loader {
        position: relative;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    
    .single-ball-loader:before,
    .single-ball-loader:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #3498db;
        animation: fade 1.5s ease-in-out infinite;
    }
    
    .single-ball-loader:before {
        animation-delay: 0.6s;
    }
    
    @keyframes fade {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: scale(1.5);
        }
    }
</style>
</head>
<body>
    <h3>Single Ball Fade Loader</h3>
    <div class="single-ball-loader"></div>
</body>
</html>

A blue circular loader animation appears where two balls fade in and out alternately, creating a pulsing effect with scaling transformation.

Method 2: Multi-Ball Loader

This approach creates multiple separate ball elements with staggered animation delays

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        text-align: center;
        padding: 2rem;
        font-family: Arial, sans-serif;
    }
    
    .multi-ball-loader {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        gap: 8px;
    }
    
    .ball {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        opacity: 0;
        animation: ballFade 1.4s ease-in-out infinite;
    }
    
    .ball:nth-child(1) {
        background-color: #e74c3c;
        animation-delay: 0s;
    }
    
    .ball:nth-child(2) {
        background-color: #f39c12;
        animation-delay: 0.2s;
    }
    
    .ball:nth-child(3) {
        background-color: #2ecc71;
        animation-delay: 0.4s;
    }
    
    .ball:nth-child(4) {
        background-color: #3498db;
        animation-delay: 0.6s;
    }
    
    .ball:nth-child(5) {
        background-color: #9b59b6;
        animation-delay: 0.8s;
    }
    
    @keyframes ballFade {
        0%, 80%, 100% {
            opacity: 0;
            transform: scale(0.6);
        }
        40% {
            opacity: 1;
            transform: scale(1);
        }
    }
</style>
</head>
<body>
    <h3>Multi-Ball Fade Loader</h3>
    <div class="multi-ball-loader">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
    </div>
</body>
</html>

Five colorful balls (red, orange, green, blue, purple) appear in a row, each fading in and out sequentially with a wave-like effect from left to right.

Key Properties

Property	Purpose
`@keyframes`	Defines the animation sequence with opacity and scale changes
`animation-delay`	Staggers the timing of each ball's animation
`transform: scale()`	Creates size variation during the fade effect
`opacity`	Controls the visibility/transparency of each ball

Conclusion

Fade balls loader animations provide an elegant way to indicate loading progress. Use pseudo-elements for simple loaders or multiple div elements for more complex multi-ball effects with customizable colors and timing.

Shabaz Alam

Updated on: 2026-03-15T16:24:24+05:30

582 Views

Previous Next