Labels

How to make Infinity Loading Css?

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Infinity</title>
  </head>
  <body>
    <section>
      <div class="container">
        <div class="circle">
          <span style="--i: 1"></span>
          <span style="--i: 2"></span>
          <span style="--i: 3"></span>
          <span style="--i: 4"></span>
          <span style="--i: 5"></span>
          <span style="--i: 6"></span>
          <span style="--i: 7"></span>
          <span style="--i: 8"></span>
          <span style="--i: 9"></span>
          <span style="--i: 10"></span>
          <span style="--i: 11"></span>
          <span style="--i: 12"></span>
          <span style="--i: 13"></span>
          <span style="--i: 14"></span>
          <span style="--i: 15"></span>
          <span style="--i: 16"></span>
          <span style="--i: 17"></span>
          <span style="--i: 18"></span>
          <span style="--i: 19"></span>
          <span style="--i: 20"></span>
        </div>
        <div class="circle">
          <span style="--i: 1"></span>
          <span style="--i: 2"></span>
          <span style="--i: 3"></span>
          <span style="--i: 4"></span>
          <span style="--i: 5"></span>
          <span style="--i: 6"></span>
          <span style="--i: 7"></span>
          <span style="--i: 8"></span>
          <span style="--i: 9"></span>
          <span style="--i: 10"></span>
          <span style="--i: 11"></span>
          <span style="--i: 12"></span>
          <span style="--i: 13"></span>
          <span style="--i: 14"></span>
          <span style="--i: 15"></span>
          <span style="--i: 16"></span>
          <span style="--i: 17"></span>
          <span style="--i: 18"></span>
          <span style="--i: 19"></span>
          <span style="--i: 20"></span>
        </div>
      </div>
    </section>
  </body>
</html>

Css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #042104;
    animation: animatecolor 4s linear infinite;
}
@keyframes animatecolor {
    0%{
        filter: hue-rotate(0deg);
        }
    100%{
        filter: hue-rotate(360deg);
        }
}
section .container{
    display: flex;
}
section .container .circle{
    position: relative;
    height: 150px;
    width: 150px;
    margin: 0 -7.5px;
}
section .container .circle span{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: rotate(calc(18deg * var(--i)));
    /* 360 / 20 = 18 */
}
section .container .circle span::before{
    content: '';
    position: absolute;    
    right: 0;
    top: calc(50% - 7.5px);
    height: 15px;
    width: 15px;
    background: #00ff0a;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff0a,
    0 0 20px #00ff0a,
    0 0 40px #00ff0a,
    0 0 60px #00ff0a,
    0 0 80px #00ff0a,
    0 0 100px #00ff0a;
    transform: scale(0.1);
    animation: animate 4s linear infinite;
    animation-delay: calc(0.1s *  var(--i));
}
@keyframes animate {
    0%{
        transform: scale(1);
    }
    50%,100%{
        transform: scale(0.1);
    }
}
section .container .circle:nth-child(2){
    transform: rotate(-180deg);
}
section .container .circle:nth-child(2) span::before{
    animation-delay: calc(-0.1s *  var(--i));
}
Download
Tags:

Comments

Post a Comment