Loading animation css

Redxcyber
1 minute read

code 👇🏻

<!doctype html>
<html>
<head>
  <title>css loader</title>
  <style>
         body {
          background-color: black; }
        h1{
            color:white;
        }
        div{
            display: block;
            position: absolute;
            width: 30px;
            height: 30px;
            left: 35%;
            top: 40%;
            border-radius: 100%;
            transform-origin: 9em 9em;
            animation: rotate;
            animation-iteration-count: infinite;
            animation-duration: 2s;
        }
  
        @keyframes rotate {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
        .d1 {
            animation-delay: 0.1s;
            background-color: blue;
        }
        .d2 {
            animation-delay: 0.2s;
            background-color: red;
        }
        .d3 {
            animation-delay: 0.3s;
            background-color: yellow;
        }
        .d4 {
            animation-delay: 0.4s;
            background-color: green;
        }
        .d5 {
            animation-delay: 0.5s;
            background-color: magenta;
        }
        .d6 {
            animation-delay: 0.6s;
            background-color: white;
        }
        .d7 {
            animation-delay: 0.7s;
            background-color: orange;
        }
    </style>
</head>
<body>
  <center>
   <h1>Loading animation by redxcyber</h1>
   <hr>
   <div class="d1"></div>
   <div class="d2"></div>
   <div class="d3"></div>
   <div class="d4"></div>
   <div class="d5"></div>
   <div class="d6"></div>
   <div class="d7"></div>
  </center>
</body>
</html>