How to Design Fade balls loader Animation using CSS ?

Last Updated : 02 Jan, 2023

Minimal Fading balls loader is a basic CSS animation, where the loader animation will be utilized to engage the user until when a specific page or content is fully get loaded in a particular platform. In this article, we will see how to create a loader animation with three balls animation effect which looks like the balls are fading away with some delay in their fading animation, for an infinite time period. We will also be using the easing out CSS function to smoothen, along with different CSS functions available for the animation.

Syntax:

@keyframes animation_name {
  keyframes-selector {
   css-styles;
 }
}

Approach: The following approach will be utilized to create the Fading balls loader animation, which is described below:

Create the loader with a div with the class name spinner. Also, create 3 child span elements for the balls inside the <div> element.
Add the styling to the body element with a black background and centered the elements.
Style the spinner by adding the height and width. Center the child elements, along with styling the span balls with border-radius of 50% & add the background-color, and opacity as 0.
Using the nth child selector property, add the animation to all 3 child elements with some delay in between them, with an infinite time period having a smooth ease-in-out effect.
Make the keyframes for 0%, 100% with opacity 1, and for 60% with opacity 0.

Example: This example illustrates the Fading balls loader animation in CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            display: grid; 
            place-items: center; 
        } 
          
        .spinner { 
            width: 100px; 
            height: 100px; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
        } 
          
        .spinner span { 
            width: 20px; 
            height: 20px; 
            border-radius: 100%; 
            background-color: rgb(0, 113, 128); 
            opacity: 0; 
        } 
          
        .spinner span:nth-child(1) { 
            animation: fade 1s ease-in-out infinite; 
        } 
          
        .spinner span:nth-child(2) { 
            animation: fade 1s ease-in-out 0.33s infinite; 
        } 
          
        .spinner span:nth-child(3) { 
            animation: fade 1s ease-in-out 0.66s infinite; 
        } 
          
        @keyframes fade { 
          
            0%, 
            100% { 
                opacity: 1; 
            } 
          
            60% { 
                opacity: 0; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3 style="color:green"> 
        Fading balls loader CSS Animation 
    </h3> 
    <div class="spinner"> 
        <span></span> 
        <span></span> 
        <span></span> 
    </div> 
</body> 
  
</html>