I wanted to animate the circles in the breathing exercises like the image below. For example, one exercise includes breathing in, out and holding for 4 seconds. The four circles represent each second and the colour will change for each second.
I got a few answers (all answers recommended CSS and not JS), and I tried two of them. One gave a nice fading effect, while the other gave exactly what I was looking for. I tried it with my app and it works well, I just had to tweak a few things.
I’ll have to also tweak it based on the exercises.. some are 10 seconds long, and others are shorter.
Another thing I have to figure out is how to change the text from “breathe in” to “hold” to “breathe out” after 4 seconds each. But that’s a whole other thing……