infinite-menu/assets/InfiniteMenu/Loader.css

Infinite Menu helps you to create a menu with infinite number of sub menus

.horizontalLinesLoader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: inherit;
}

.horizontalLinesLoader span {
  --dot1: #788c9f;
  --dot2: #788c9f33;
  --dot3: #788c9f66;
  --dot4: #788c9fb3;
  --duration: 700ms;
  --easing: linear;
  --delay: 1ms;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.horizontalLinesLoader span:nth-child(1) {
  background-color: var(--dot1);
  animation: var(--duration) var(--easing) var(--delay) infinite normal flash1;
}

.horizontalLinesLoader span:nth-child(2) {
  background-color: var(--dot2);
  animation: var(--duration) var(--easing) var(--delay) infinite normal flash2;
}

.horizontalLinesLoader span:nth-child(3) {
  background-color: var(--dot3);
  animation: var(--duration) var(--easing) var(--delay) infinite normal flash3;
}

.horizontalLinesLoader span:nth-child(4) {
  background-color: var(--dot4);
  animation: var(--duration) var(--easing) var(--delay) infinite normal flash4;
}

@keyframes flash1 {

  0%,
  100% {
    background-color: var(--dot1)
  }

  25% {
    background-color: var(--dot2)
  }

  50% {
    background-color: var(--dot3)
  }

  75% {
    background-color: var(--dot4)
  }
}

@keyframes flash2 {

  0%,
  100% {
    background-color: var(--dot4)
  }

  25% {
    background-color: var(--dot1)
  }

  50% {
    background-color: var(--dot2)
  }

  75% {
    background-color: var(--dot3)
  }
}

@keyframes flash3 {

  0%,
  100% {
    background-color: var(--dot3)
  }

  25% {
    background-color: var(--dot4)
  }

  50% {
    background-color: var(--dot1)
  }

  75% {
    background-color: var(--dot2)
  }
}

@keyframes flash4 {

  0%,
  100% {
    background-color: var(--dot2)
  }

  25% {
    background-color: var(--dot3)
  }

  50% {
    background-color: var(--dot4)
  }

  75% {
    background-color: var(--dot1)
  }
}