.loader span {
  position: relative;
  top: 0;
  display: inline-block;
  text-transform: uppercase;
  opacity: 0;
  transform: rotateX(-90deg);
}

.let1 {
  animation: drop 1.5s ease-in-out infinite;
  animation-delay: .2s;
}

.let2 {
  animation: drop 1.5s ease-in-out infinite;
  animation-delay: .3s;
}

.let3 {
  animation: drop 1.5s ease-in-out infinite;
  animation-delay: .4s;
}

.let4 {
  animation: drop 1.5s ease-in-out infinite;
  animation-delay: .5s;
}

.let5 {
  animation: drop 1.5s ease-in-out infinite;
  animation-delay: .6s;
}

.let6 {
  animation: drop 1.5s ease-in-out infinite;
  animation-delay: .7s;
}

.let7 {
  animation: drop 1.5s ease-in-out infinite;
  animation-delay: .8s;
}

@keyframes drop {
  10% {
      opacity: 0.5;
      top: -3.78em;
  }

  20% {
      opacity: 1;
      top: 0;
      transform: rotateX(-360deg);
  }

  80% {
      opacity: 1;
      top: 0;
      transform: rotateX(-360deg);
  }

  90% {
      opacity: 0.5;
  }

  100% {
      opacity: 0;
      top: 3.78em;
  }
}

.loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: #fff;
  z-index: 99999;
}