@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: var(--radius-sm);
  animation: typing-dot (@frame-time * 3) ease-in-out infinite;
  background: var(--gray-5);
  transform: rotate(-15deg);

  & + & {
    margin-left: 4px;
  }
  &:nth-child(3) {
    animation-delay: 0.1s;
  }
  &:nth-child(4) {
    animation-delay: 0.2s;
  }
}

@keyframes typing-dot {
  0%, 40%, 100% {
    height: 4px;
    background: var(--color-line-2);
  }
  20% {
    height: 12px;
    background-image: linear-gradient(162deg, var(--brand-2) 0%, var(--brand-1) 100%);
  }
}