Typing dots

<div class="typing">
  <div class="typing__text"><span>typing...</span></div>
  <div class="typing__cursor"></div>
</div>

<style>
.typing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.typing__text span {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid transparent;
  animation: typing 2.4s steps(12) infinite alternate;
}

.typing__cursor {
  width: 10px;
  height: 18px;
  background: #3b82f6;
  border-radius: 2px;
  animation: blink 1s steps(1) infinite;
}

@keyframes typing {
  0% {
    width: 0;
  }
  100% {
    width: 78px;
  }
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  50.01%, 100% {
    opacity: 0;
  }
}
</style>