galaxy/loaders/BlackisPlay_fast-lizard-14.html

<div id="timer">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
  <div id="div5"></div>
  <div id="div6"></div>
  <div id="div7"></div>
  <div id="div8"></div>
  <div id="div9"></div>
  <div id="div10"></div>
  <div id="div11"></div>
  <div id="div12"></div>
  <div id="div13"></div>
  <div id="div14"></div>
  <div id="div15"></div>
</div>

<style>
/* From Uiverse.io by BlackisPlay  - Tags: simple, animation, white, loading, loader, smooth, light */
#timer {
  display: grid;
  grid-template-columns: repeat(3, 25px);
  grid-template-rows: repeat(5, 25px);
  gap: 10px;
  position: absolute;
  grid-template-areas:
    "div1 div2 div3"
    "div4 div5 div6"
    "div7 div8 div9"
    "div10 div11 div12"
    "div13 div14 div15";
}

#div1,
#div2,
#div3,
#div4,
#div5,
#div6,
#div7,
#div8,
#div9,
#div10,
#div11,
#div12,
#div13,
#div14,
#div15 {
  background-color: rgb(243, 243, 243);
  border-radius: 5px;
}

#div1 {
  grid-area: div1;
  animation: div1 10s both infinite;
}

@keyframes div1 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(70px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(0);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div2 {
  grid-area: div2;
  animation: div2 10s both infinite;
}

@keyframes div2 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(35px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(35px);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(0);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div3 {
  grid-area: div3;
}

#div4 {
  grid-area: div4;
  animation: div4 10s both infinite;
}

@keyframes div4 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(70px);
  }

  20% {
    transform: translateX(70px);
  }

  30% {
    transform: translateX(70px);
  }

  40% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(70px);
  }

  70% {
    transform: translateX(70px);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div5 {
  grid-area: div5;
  display: none;
}

#div6 {
  grid-area: div6;
  animation: div6 10s both infinite;
}

@keyframes div6 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-70px);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(0);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div7 {
  grid-area: div7;
  animation: div7 10s both infinite;
}

@keyframes div7 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(70px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(70px);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div8 {
  grid-area: div8;
  animation: div8 10s both infinite;
}

@keyframes div8 {
  0% {
    transform: translateX(35px);
  }

  10% {
    transform: translateX(35px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(35px);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(35px);
  }
}

#div9 {
  grid-area: div9;
}

#div10 {
  grid-area: div10;
  animation: div10 10s both infinite;
}

@keyframes div10 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(70px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(70px);
  }

  40% {
    transform: translateX(70px);
  }

  50% {
    transform: translateX(70px);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(70px);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(70px);
  }

  100% {
    transform: translateX(0);
  }
}

#div11 {
  grid-area: div11;
  display: none;
}

#div12 {
  grid-area: div12;
  animation: div12 10s both infinite;
}

@keyframes div12 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-70px);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(0);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div13 {
  grid-area: div13;
  animation: div13 10s both infinite;
}

@keyframes div13 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(70px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(70px);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(70px);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div14 {
  grid-area: div14;
  animation: div14 10s both infinite;
}

@keyframes div14 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(35px);
  }

  20% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(35px);
  }

  50% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(35px);
  }

  80% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

#div15 {
  grid-area: div15;
}

</style>