.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-5);
  display: grid;
  place-items: center;
  background: #fff;
}
.dots-loader {
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}
.dot-loader {
  display: inline-block;
  width: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #add8e6;
  -webkit-animation: fade-out 2.5s ease-in-out infinite;
          animation: fade-out 2.5s ease-in-out infinite;
}
.dot-loader:nth-child(1) {
  background: #24a8e0;
}
.dot-loader:nth-child(2) {
  background: #eb1e5b;
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
.dot-loader:nth-child(3) {
  background: #f59324;
  -webkit-animation-delay: 0.55s;
          animation-delay: 0.55s;
}
.dot-loader:nth-child(4) {
  background: #56b847;
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}
@-webkit-keyframes fade-out {
  40% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
}
@keyframes fade-out {
  40% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
}