galaxy/loaders/csemszepp_nice-octopus-57.html

  <div class="loader">
      <span>L</span>
      <span>O</span>
      <span>A</span>
      <span>D</span>
      <span>I</span>
      <span>N</span>
      <span>G</span>
    </div>
<style>
/* From Uiverse.io by csemszepp - Source: https://codepen.io/SandipDust/pen/LYPOGLQ - Tags:  */
.loader {
  -webkit-perspective: 700px;
  perspective: 700px;
  background: red;
  padding: 10px 20px;
}

.loader>span {
  font-size: 60px;
  font-family: "franklin gothic medium",sans-serif;
  display: inline-block;
  animation: flip 2.6s infinite linear;
  transform-origin: 0 70%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

@keyframes flip {
  35% {
    transform: rotatex(360deg);
  }

  100% {
    transform: rotatex(360deg);
  }
}

.loader>span:nth-child(even) {
  color: white;
}

.loader>span:nth-child(2) {
  animation-delay: 0.3s;
}

.loader>span:nth-child(3) {
  animation-delay: 0.6s;
}

.loader>span:nth-child(4) {
  animation-delay: 0.9s;
}

.loader>span:nth-child(5) {
  animation-delay: 1.2s;
}

.loader>span:nth-child(6) {
  animation-delay: 1.5s
}

.loader>span:nth-child(7) {
  animation-delay: 1.8s
}
</style>