How to make CSS Loader ?

Last Updated : 23 Oct, 2019

The CSS loader is useful when a certain page took a few seconds to load the content of the webpage. When the user has to wait for the content to fully loaded on the webpage. If the certain webpage doesn’t have the loader of CSS then the loading time the user will think that the webpage is not responding at all. So putting the CSS loader on the web page makes the user distracted or waited for few seconds until the page is fully loaded. The CSS can be used for styling and adding animations and other visual motion graphics on a webpage. A small demo for animations under CSS is explained in the following code.

Example 1: This example creates the CSS loader using CSS.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>css loader</title> 
    <style> 
        h1{ 
            color:green; 
        } 
        .gfg { 
            display: block; 
            position: absolute; 
            width: 10px; 
            height: 10px; 
            left: calc(50% - 1em); 
            border-radius: 1em; 
            transform-origin: 1em 2em; 
            animation: rotate; 
            animation-iteration-count: infinite; 
            animation-duration: 1.8s; 
        } 
  
        /* Rotation of loader dots */ 
        @keyframes rotate { 
            from { 
                transform: rotateZ(0deg); 
            } 
            to { 
                transform: rotateZ(360deg); 
            } 
        } 
        .g1 { 
            animation-delay: 0.1s; 
            background-color: #1D8348; 
  
        } 
        .g2 { 
            animation-delay: 0.2s; 
            background-color: #239B56; 
        } 
        .g3 { 
            animation-delay: 0.3s; 
            background-color: #2ECC71; 
        } 
        .g4 { 
            animation-delay: 0.4s; 
            background-color: #82E0AA ; 
        } 
        .g5 { 
            animation-delay: 0.5s; 
            background-color: #D5F5E3; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <h4>CSS Loader</h4> 
        <div class='loader'> 
            <div class='gfg g1'></div> 
            <div class='gfg g2'></div> 
            <div class='gfg g3'></div> 
            <div class='gfg g4'></div> 
            <div class='gfg g5'></div> 
        </div> 
    </center> 
</body> 
  
</html> 

Output:

Example 2: This example creates the CSS loader using CSS.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>css loader</title> 
    <style> 
        h1{ 
            color:green; 
        } 
        .gfg { 
            display: block; 
            position: absolute; 
            width: 100px; 
            height: 10px; 
            left: calc(58% - 5em); 
            transform-origin: 1px 10px; 
            animation: rotate; 
            animation-iteration-count: infinite; 
            animation-duration: 2.8s; 
        } 
  
        /* Rotation of loader dots */ 
        @keyframes rotate { 
            from { 
                transform: rotateY(50deg); 
            } 
            to { 
                transform: rotateY(360deg); 
            } 
        } 
        .g1 { 
            animation-delay: 0.1s; 
            background-color: #1D8348; 
        } 
        .g2 { 
            animation-delay: 0.2s; 
            background-color: #239B56; 
        } 
        .g3 { 
            animation-delay: 0.3s; 
            background-color: #2ECC71; 
        } 
        .g4 { 
            animation-delay: 0.4s; 
            background-color: #82E0AA ; 
        } 
        .g5 { 
            animation-delay: 0.5s; 
            background-color: #D5F5E3; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <h4>CSS Loader</h4> 
        <div class='loader'> 
            <div class='gfg g1'></div> 
            <div class='gfg g2'></div> 
            <div class='gfg g3'></div> 
            <div class='gfg g4'></div> 
            <div class='gfg g5'></div> 
        </div> 
    </center> 
</body> 
  
</html>                     