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>