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>
    </div>
  </body>
</html>