Assistant Typing Indicator: CSS AI Animation

Assistant Typing Indicator

An assistant avatar with a light arc circling its rim beside a soft chat bubble, where three dots rise and brighten in a smooth wave. The modern take on is typing, tail corner toward the avatar.

Also known as: typing dots animation css, ai chat loading animation, chatbot typing indicator, typing bubble css.

Color Base size 16px Dark background

HTML

<div class="aia-assistant-typing" role="status" aria-label="Assistant is typing">
  <span class="aia-assistant-typing-avatar" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 2c.6 5.2 3.8 8.4 10 10-6.2 1.6-9.4 4.8-10 10-.6-5.2-3.8-8.4-10-10 6.2-1.6 9.4-4.8 10-10Z"/></svg></span>
  <span class="aia-assistant-typing-bubble" aria-hidden="true"><i></i><i></i><i></i></span>
</div>

CSS

.aia-assistant-typing {
  --c: var(--aia-color, #7c5cff);
  font-size: var(--aia-size, 16px);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.4;
  display: inline-flex;
  align-items: flex-end;
  gap: 0.6em;
}
.aia-assistant-typing-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c));
  box-shadow: 0 0.3em 0.8em -0.3em color-mix(in srgb, var(--c) 60%, transparent);
}
.aia-assistant-typing-avatar::before {
  content: "";
  position: absolute;
  inset: -0.22em;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 55%, color-mix(in srgb, var(--c) 90%, transparent));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.12em), #000 calc(100% - 0.11em));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.12em), #000 calc(100% - 0.11em));
  animation: aia-assistant-typing-spin 1.8s linear infinite;
}
.aia-assistant-typing-avatar svg {
  width: 1.1em;
  height: 1.1em;
  fill: #fff;
}
.aia-assistant-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 0.36em;
  padding: 1.05em 1.2em;
  border-radius: 1.25em 1.25em 1.25em 0.4em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 5%, transparent);
}
.aia-assistant-typing-bubble i {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: currentColor;
  animation: aia-assistant-typing-wave 1.3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aia-assistant-typing-bubble i:nth-child(2) { animation-delay: 0.15s; }
.aia-assistant-typing-bubble i:nth-child(3) { animation-delay: 0.3s; }
@keyframes aia-assistant-typing-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-assistant-typing-wave {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30%           { transform: translateY(-0.32em); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-assistant-typing-avatar::before { animation: none; }
  .aia-assistant-typing-bubble i { animation-duration: 3.9s; }
}

@media (prefers-reduced-motion: reduce) {
  .aia-assistant-typing, .aia-assistant-typing *, .aia-assistant-typing::before, .aia-assistant-typing::after, .aia-assistant-typing *::before, .aia-assistant-typing *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --aia-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --aia-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Assistant Typing Indicator

HTML

CSS

Customizing this snippet

Similar ai animations