Moving ASCII art
Typing Dots
Three dots appearing one at a time, the pattern every chat app uses to show someone is writing.
.
About the animation
What it is
Three dots appearing one at a time, the pattern every chat app uses to show someone is writing.
Bot responses, loading states and simulating a reply in progress.
Motion guide
How the typing dots animation works
Dots accumulate one per frame, then the fourth frame clears them all. The blank frame is what makes it loop cleanly instead of jumping from three dots back to one.
Implementation tip
Keep every frame the same width by padding with spaces, or the line will jitter as the dots appear. This is the most common mistake with this animation.
Best uses
- 01
Bot replies in progress
- 02
Loading states
- 03
Simulated conversation
Use the frames
How to run the typing dots animation
- 01
Copy the frame set
Copy all 4 frames at once, or take individual frames from the reference list below.
- 02
Display them in order
Use a timer in your script or bot to advance through the frames at about 3 frames per second.
- 03
Replace the previous frame
Keep every frame the same width by padding with spaces, or the line will jitter as the dots appear. This is the most common mistake with this animation.
Frame by frame
Every frame
.
..
...
Common questions
About this ASCII animation
What is the typing dots ASCII animation?
Three dots appearing one at a time, the pattern every chat app uses to show someone is writing. Dots accumulate one per frame, then the fourth frame clears them all. The blank frame is what makes it loop cleanly instead of jumping from three dots back to one.
Does copying the frames make them animate?
No. The copied text contains each of the 4 drawings, while your terminal, app or bot supplies the timer and replaces one frame with the next. Keep every frame the same width by padding with spaces, or the line will jitter as the dots appear. This is the most common mistake with this animation.
Can I change the playback speed?
Yes. The preview uses 3 fps as a readable starting point. A shorter delay feels faster, while a longer delay makes each frame easier to inspect.
Where does the typing dots animation fit?
Bot responses, loading states and simulating a reply in progress. It suits bot replies in progress, loading states, simulated conversation.
Also known as
Keep browsing