@chatui/core/es/components/Typing/style.less

The React library for Chatbot UI

.Typing {
  display: flex;
  align-items: center;
  height: 22.5px;
}

.Typing-text {
  margin-right: 9px;
  font-size: 15px;
}

@frame-time: 0.4s;

.Typing-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  animation: typing-dot (@frame-time * 4) ease-in-out infinite;
  background: var(--gray-4);

  & + & {
    margin-left: 4px;
  }
  &[data-i="1"] {
    animation-delay: 0.2s;
  }
  &[data-i="2"] {
    animation-delay: 0.3s;
  }
}

@keyframes typing-dot {
  0%, 40%, 100% {
    background: var(--gray-4);
  }
  20% {
    background: var(--gray-3);
    transform: scale(1.2);
  }
}