Take a breath or two and see it in action at Inhala y Exhala App.
The Inhala y Exhala Breathing App visually guides the user through an unlimited number of breath cycles. The circle increases in size for about 5 seconds, holds for 3 seconds, and decreases in size for another 5 seconds. The circle dynamically responds to each of the 3 stages. The white dot moving around the circumference also provides a visual queue for the user.
One full cycle will take just over 13 seconds.
CSS, HTML, and JavaScript are used.
Images below show the three stages.
Inhale
Hold
Exhale
This project is built off of the Relaxer App found in the 20 Web Projects With Vanilla JavaScript tutorials by Brad Traversy.