discourse-ai/assets/stylesheets/common/streaming.scss

@keyframes flashing {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

article.streaming .cooked {
  .progress-dot::after {
    content: "\25CF";
    font-family: Söhne Circle, system-ui, -apple-system, Segoe UI, Roboto,
      Ubuntu, Cantarell, Noto Sans, sans-serif;
    line-height: normal;
    margin-left: 0.25rem;
    vertical-align: baseline;
    animation: flashing 1.5s 3s infinite;
    display: inline-block;
    font-size: 1rem;
    color: var(--tertiary-medium);
  }

  > .progress-dot:only-child::after {
    // if the progress dot is the only content
    // we are likely waiting longer for a response
    // so it can start animating instantly
    animation: flashing 1.5s infinite;
  }
}

@keyframes ai-indicator-wave {
  0%,
  60%,
  100% {
    transform: initial;
  }
  30% {
    transform: translateY(-0.2em);
  }
}

.ai-indicator-wave {
  flex: 0 0 auto;
  display: inline-flex;

  &__dot {
    display: inline-block;
    @media (prefers-reduced-motion: no-preference) {
      animation: ai-indicator-wave 1.8s linear infinite;
    }
    &:nth-child(2) {
      animation-delay: -1.6s;
    }
    &:nth-child(3) {
      animation-delay: -1.4s;
    }
  }
}