How to make CSS Loader ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.