Loading animation using css

Redxcyber
1 minute read



<!doctype html>
<html>
<head>
  <style>
    body
    {
      background-color: black;
    }
    h2 {
      color:white;
      text-align: center;
      letter-spacing: 10px;
    }
     
    h1 {
      position: absolute;
      left: 30%;
      top: 49%;
      color: white;
      letter-spacing: 40px;
      animation-name: color1;
      animation-delay: 0.8s;
      animation-duration: 0.7s;
      animation-iteration-count: infinite;
    }
    .main
    {
      width: 150px;
      height: 150px;
      border: 25px solid transparent;
      border-top: 25px solid white;
      border-bottom: 25px solid green;
      border-radius: 100%;
      position: absolute;
      left: 35%;
      top: 30%;
      padding: 50px;
      animation-name: rotate;
      animation-delay: 0.8s;
      animation-duration: 0.7s;
      animation-iteration-count: infinite;
    }
   
    @keyframes rotate
    {
      0%{ transform: rotate(0deg); }
      100%{ transform: rotate(360deg); }
    }
   
    @keyframes color1
    {
      0%{ color: white; }
      100%{  color: green; }
    }
     
    </style>
</head>
<body>
  <h2>Loading animation by redxcyber</h2>
  <hr>
  <div class="main"></div>

  <h1>LOADING</h1>

</body>
</html>