Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




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

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :