galaxy/loaders/Df12345677_honest-seahorse-42.html

<div class="loader"> 
  <span id="one"></span>
  <span id="two"></span>
  <span id="three"></span>
</div>
<style>
/* From Uiverse.io by Df12345677 - Tags: loader */
.loader {
  display: flex;
  gap: 10px;
}

.loader span {
  height: 20px;
  width: 20px;
  background-image: linear-gradient(to right , #333 , #233,#222,#122,#112,#111,#011,#001,#000);
  border-radius: 50%;
  animation-name: animar;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  box-shadow: 20px 20px 18px #666666,
             -20px -20px 18px #ffffff;
}

#one {
  animation-delay: 1s;
}

#two {
  animation-delay: 2s;
}

#three {
  animation-delay: 3s;
}

@keyframes animar {
  0% {
    transform: scale(1);
  }

  33% {
    transform: scale(.3);
  }

  66% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}
</style>