Skip to content

Lottie typing dots

At 48 px

Static alternative

Reduced-motion preference pauses autoplay. Use a static state in your app when motion is reduced.

Three dots with a staggered bounce.

Make a typing indicator for chat

  1. Play the three staggered dots. Each dot rises and returns before the next cycle.
  2. Choose your chat interface color and try 0.5× for calmer motion.
  3. Open in editor to change Dot 1, Dot 2, and Dot 3. Keep their vertical motion staggered rather than moving all three together.
  4. Leave space above the dots so the bounce stays inside the canvas.

Your app must decide when to show typing status. This project only supplies the animation. Use a text status for screen readers and a static alternative for reduced motion.

Keep your edits and choose an export

Download editable project saves your current colors and timing as a .motion backup, without an account. Reopen it in Lottieditor to continue editing. It is not a Lottie player file.

The editor requires sign-in for animation exports. Free accounts get five watermarked GIF exports per month. Pro provides unwatermarked Lottie, dotLottie, GIF, and browser-supported video exports. View editor plans.