Typing Indicator Generator
Design the three dots that say a reply is on its way. Tune the motion, colours and size, preview it in a real chat, and copy accessible HTML + CSS or a React component with reduced motion built in.
Start from a style
Tune it
One full rise and fall of every dot. 1-1.5s reads as calm, under 0.8s as frantic.
Read aloud by screen readers in place of the dots.
<div class="typing" role="status">
<span class="typing__sr">Support is typing</span>
<span aria-hidden="true">
<span class="typing__dot"></span>
<span class="typing__dot"></span>
<span class="typing__dot"></span>
</span>
</div>
<style>
.typing {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 11px 14px;
background: #EEF0FF;
border-radius: 16px;
}
.typing__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #0808EE;
animation: ti-wave 1.1s infinite ease-in-out;
}
.typing__dot:nth-child(1) { animation-delay: 0.00s; }
.typing__dot:nth-child(2) { animation-delay: 0.28s; }
.typing__dot:nth-child(3) { animation-delay: 0.56s; }
@keyframes ti-wave {
0%, 100% { transform: translateY(0) scale(.85); opacity: .5; }
50% { transform: translateY(-35%) scale(1); opacity: 1; }
}
/* People who ask for less motion get a calm, still indicator. */
@media (prefers-reduced-motion: reduce) {
.typing__dot { animation: none; opacity: .7; }
}
/* Visually hidden, still read by screen readers. */
.typing__sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
</style>Why the dots matter
A chat window that goes quiet after you hit send feels broken. The typing indicator fills that silence: it confirms the message landed and that a reply is being written. In a website chatbot it covers the moment a model takes to answer; in live chat it tells the visitor an agent has picked up. Either way it is a promise, so it should appear the instant a reply starts and disappear the instant the reply arrives, replaced in place by the message so the conversation does not jump.
Choosing a style
- Bounce - dots hop one after another. The most recognisable pattern and the easiest to read at small sizes.
- Pulse - dots grow and shrink in place. Calmer, and it never moves outside its bubble, which suits tight layouts.
- Wave - a softer bounce with a slight scale. It feels friendlier and works well with brand colours.
- Fade - opacity only, the gentlest option and the closest to how iMessage behaves.
- Text - "Ada is typing" with small dots, best for team chat and group conversations where who is typing matters as much as that someone is.
Keep the dot colour readable against the bubble, keep the cycle between about one and one and a half seconds, and let the indicator inherit your chat's corner radius so it reads as part of the same conversation. Our chatbot UI design guide covers the rest of the window.
What the generated code does for you
The output is small on purpose. The bubble is a flex container, each dot is an empty span, and a single keyframe animation runs on every dot with a staggered delay. Only transform and opacity change, so the browser composites the animation without relayout - it stays smooth even on a busy page or a low-end phone.
Accessibility is handled rather than left as homework. The dots carry aria-hidden; a visually hidden "Support is typing" sits inside an element with role="status", which screen readers announce politely; and a prefers-reduced-motion rule freezes the animation for people who have asked their device for less movement. Rename the class prefix if .typing clashes with your styles. The chat widget around it is the next piece - the chat widget designer builds that.
Frequently asked questions
What is a typing indicator?
It is the small animation - usually three dots - that tells you the other side of a chat is writing a reply. It sets an expectation that an answer is coming, which stops people from repeating the question or leaving. In a chatbot it covers the second or two a model takes to answer, and in live chat it shows an agent has picked the conversation up.
How do I make a typing indicator with CSS only?
Put three small round elements in a flex container and give each the same keyframe animation with a staggered animation-delay, so they rise or fade one after another. Animate only transform and opacity so the browser can run it on the compositor. Pick a style above and the CSS tab gives you exactly that, including a reduced-motion fallback.
Is a typing indicator accessible to screen reader users?
Only if you make it so. The dots themselves mean nothing to a screen reader, so hide them with aria-hidden and put a short text such as "Ada is typing" inside an element with role="status", which is announced politely without stealing focus. Remove the element when the reply arrives. The generated HTML here does all of this.
How long should a chatbot show the typing indicator?
As long as the reply genuinely takes, and no longer. Adding fake delays makes a fast bot feel slow. A common pattern is to show the dots the moment the visitor sends a message, keep them while the answer is generated or while an agent types, and replace them with the message itself rather than hiding them first, so nothing jumps.
Should the animation stop for reduced motion?
Yes. Some people get dizzy or nauseous from looping motion and ask their operating system to reduce it. Honour that with the prefers-reduced-motion media query: stop the animation and leave the dots visible at a steady opacity, so the meaning survives without the movement. Every snippet this generator outputs includes that rule.
Can I use the generated code commercially?
Yes. The HTML, CSS and React snippets are yours to use in any project, open source or commercial, with no attribution required. Nothing you design here is sent to a server - the preview and the code are produced in your browser from the options you choose.
Related
Want the whole chat, not just the dots?
Conferbot's website chat widget ships with typing indicators, quick replies and an AI agent that answers for you. Free plan, no card.