umami/components/common/Loading.module.css

@keyframes blink {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.loading.overlay {
  height: 100%;
  width: 100%;
  z-index: 10;
  background: var(--gray400);
  opacity: 0.4;
}

.loading div {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: var(--gray400);
  animation: blink 1.4s infinite;
  animation-fill-mode: both;
}

.loading.overlay div {
  background: var(--gray900);
}

.loading div + div {
  margin-left: 10px;
}

.loading div:nth-child(2) {
  animation-delay: 0.2s;
}

.loading div:nth-child(3) {
  animation-delay: 0.4s;
}