.activity-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  svg {
    display: block;
    width: 20px;
    height: auto;
    color: black;
    path {
      fill: currentColor;
      opacity: 0.15;
      animation: wave 1.2s linear infinite;
      transform: translateZ(0);
    }
  }
}

/* stagger each bar */
.activity-indicator svg path {
  &:nth-child(1) { animation-delay: 0s; }
  &:nth-child(2) { animation-delay: 0.1s; }
  &:nth-child(3) { animation-delay: 0.2s; }
  &:nth-child(4) { animation-delay: 0.3s; }
  &:nth-child(5) { animation-delay: 0.4s; }
  &:nth-child(6) { animation-delay: 0.5s; }
  &:nth-child(7) { animation-delay: 0.6s; }
  &:nth-child(8) { animation-delay: 0.7s; }
}

@keyframes wave {
  0%   { opacity: 0.15; }
  25%  { opacity: 1; }
  50%  { opacity: 0.15; }
  100% { opacity: 0.15; }
}