Skip to content

CSS loading animation using HTML & CSS|6

    Step 1) Add HTML:

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        
      </body>
    </html>
    
    </body>
    </html>
    
    </body>
    </html>
    <!-- code by gs code -->
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        body{
          background: #36688d;
        }
         .hydrogen{
           position: absolute;
           top:50%;
           left:50%;
           transform: translate(-50%,-50%);
           border: 2px solid #fff;
           width: 100px;
           height: 100px;
           border-radius: 50%;
           box-shadow: 0 0 50px 10px #fff;
           animation: syhydro 4s infinite linear;
         }
         .hydrogen:before{
           content: "";
           position: absolute;
           top:40%;
           left: 40%;
           width: 20px;
           height: 20px;
           background-color: #fff;
           border-radius: 50%;
           box-shadow: 0 0 50px 10px #fff;
         }
         .hydrogen:after{
           content: "";
           position: absolute;
           top:10px;
           width: 20px;
           height: 20px;
           background-color: #fff;
           border-radius: 50%;
          box-shadow: 0 0 50px 10px #fff;
         }
         @keyframes syhydro {
           0%{
             transform: rotate(0deg);
           }
           100%{
             transform: rotate(359deg);
           }
           
         }
    
        </style>
    
      </head>
      <body>
        <div class="hydrogen">
    
        </div>
    
      </body>
    </html>