Each circle calculates its color using a sine (sin)
function so that the color changes gradually at the
minimum and maximum points. Additionally,
each circle animates its color within a specified interval
that takes up a portion of the overall animation time.
The position of these intervals generates the visual
effect of a single light source moving behind the three dots.

Congratulations! You now have a typing indicator that lets users
know when someone else is typing. The indicator animates in and out,
and displays a repeating animation while the other user is typing.

Interactive example

Run the app:

Click the round on/off switch at the bottom
of the screen to turn the typing indicator bubble
on and off.

Create a staggered menu animation

Create an expandable FAB