Inhale - Hold - Exhale animation using SVG circles

Recently I was working on the UI of a meditation app, there requirement was like user can click in circles and the 7 concentric circles will increase from inside on the count of 4-3-2-1. Then it will ask the user to hold for 4 more seconds and again Exhale 4-3-2-1.  In first version I prepared GIF images and animated completely using jquery.  One image used to load after another using setTimeout().  But that was not properly running. The images were loading at different times so the animations were starting at different times giving some unwanted results. I decided to do this with SVG shapes and animations. Used SVG circle for concentric circles.  Used the value of circles in percent to get the responsive circles.  No need of animations just the opacity on/off worked for me. Finally I ended up with the following code and function.

DEMO

PUSH TO START

HTML

<h3 id="pushToStart" class="blinking">PUSH TO START</h3>

<svg viewBox="0 0 140 140" preserveAspectRatio="xMinYMin meet" id="ccircle">
  <g>
    <circle id="c7" r="46%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
<circle id="c6" r="40%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
<circle id="c5" r="34%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
<circle id="c4" r="28%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
<circle id="c3" r="22%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
<circle id="c2" r="16%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
<circle id="c1" r="10%" cx="50%" cy="50%" stroke="white" stroke-width="4" stroke-opacity="0.3" fill-opacity="0" />
  </g>
</svg>
<div id="counterValue"></div>

CSS

.blinking{
    animation:blinkingText 1.2s infinite; color:#fff;
}
@keyframes blinkingText{
    0%{     color: #fff;    }
    49%{    color: #fff; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #fff;    }
} // this is for the text PUST TO START to prompt user to do the action

#counterValue{font-size:90px; color:#dccf07; font-weight: bold;}
#pushToStart.noBlink{dispay:block; color:#fff;}

JQuery Script

jQuery(document).ready(function() {


jQuery("#ccircle").click(function(){


jQuery("#pushToStart").html("INHALE");
jQuery("#pushToStart").removeClass("blinking").addClass("noBlink");

        setTimeout(function () { $("#c1").attr("stroke-opacity", "1"); }, 500);
setTimeout(function () { $("#c2").attr("stroke-opacity", "1"); }, 1000);
setTimeout(function () { $("#c3").attr("stroke-opacity", "1"); }, 1500);
setTimeout(function () { $("#c4").attr("stroke-opacity", "1"); }, 2000);
setTimeout(function () { $("#c5").attr("stroke-opacity", "1"); }, 2500);
setTimeout(function () { $("#c6").attr("stroke-opacity", "1"); }, 3000);
setTimeout(function () { $("#c7").attr("stroke-opacity", "1"); }, 3500);

setTimeout(function () { $("#counterValue").html("4"); }, 1000);
setTimeout(function () { $("#counterValue").html("3"); }, 2000);
setTimeout(function () { $("#counterValue").html("2"); }, 3000);
setTimeout(function () { $("#counterValue").html("1"); }, 4000);
setTimeout(function () { $("#counterValue").html("0"); }, 4000);

setTimeout(function () { $("#pushToStart").html("HOLD"); }, 4000);

setTimeout(function () { $("#counterValue").html("4"); }, 5000);
setTimeout(function () { $("#counterValue").html("3"); }, 6000);
setTimeout(function () { $("#counterValue").html("2"); }, 7000);
setTimeout(function () { $("#counterValue").html("1"); }, 8000);
setTimeout(function () { $("#counterValue").html("0"); }, 9000);

setTimeout(function () { $("#pushToStart").html("EXHALE"); }, 10000);
    setTimeout(function () { $("#counterValue").html("4"); }, 11000);
setTimeout(function () { $("#counterValue").html("3"); }, 12000);
setTimeout(function () { $("#counterValue").html("2"); }, 13000);
setTimeout(function () { $("#counterValue").html("1"); }, 14000);
setTimeout(function () { $("#counterValue").html("0"); }, 15000);
 
setTimeout(function () { $("#c1").attr("stroke-opacity", "0.3"); }, 14000);
setTimeout(function () { $("#c2").attr("stroke-opacity", "0.3"); }, 13500);
setTimeout(function () { $("#c3").attr("stroke-opacity", "0.3"); }, 13000);
setTimeout(function () { $("#c4").attr("stroke-opacity", "0.3"); }, 12500);
setTimeout(function () { $("#c5").attr("stroke-opacity", "0.3"); }, 12000);
setTimeout(function () { $("#c6").attr("stroke-opacity", "0.3"); }, 11500);
setTimeout(function () { $("#c7").attr("stroke-opacity", "0.3"); }, 11000);


setTimeout(function () { $("#pushToStart").html("PUSH TO START"); $("#pushToStart").removeClass("noBlink").addClass("blinking");}, 15000);

});



});

You can make this code more dynamic by using the loops or variables.  I have used very basic code to show you how exactly the animation is working with simple script.


Share Your Solutions