Countdown Timer

Clock = "<svg version='1.1' id='L2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'
  viewBox='0 0 100 150' enable-background='new 0 0 100 100' xml:space='preserve'>
<circle fill='none' stroke='#017CBA' stroke-width='4' stroke-miterlimit='10' cx='50' cy='50' r='48'/>
<line fill='none' stroke-linecap='round' stroke='#017CBA' stroke-width='4' stroke-miterlimit='10' x1='50' y1='50' x2='50' y2='13'>
  <animateTransform 
       attributeName='transform' 
       dur='60s'
       type='rotate'
       from='0 50 50'
       to='360 50 50'
       repeatCount='4' />
</line>
<line fill='none' stroke-linecap='round' stroke='#017CBA' stroke-width='4' stroke-miterlimit='10' x1='50' y1='50' x2='50' y2='25'>
  <animateTransform 
       attributeName='transform' 
       dur='1h'
       type='rotate'
       from='0 50 50'
       to='360 50 50'
       repeatCount='1' />
</line>
<text id='min' style='font-variant:normal;font-weight:bold;font-size:30px;font-family:Arial;fill:#017CBA;fill-opacity:1;fill-rule:nonzero;stroke:none'>
    <tspan id='4-min' opacity='0' y='130' x='10'>4 min</tspan>
    <tspan id='3-min' opacity='0' y='130' x='10'>3 min</tspan>
    <tspan id='2-min' opacity='0' y='130' x='10'>2 min</tspan>
    <tspan id='1-min' opacity='0' y='130' x='10'>1 min</tspan>
    <tspan id='0-min' opacity='0' y='130' x='10'>0 min</tspan>
</text>
<animate  xlink:href='#4-min' begin='0min' attributeType='XML' attributeName='opacity' from='0' to='1' dur='60s'  values='0; 1; 1; 0' keyTimes='0; 0.01; 0.99; 1' fill='freeze' repeatCount='0'/>
<animate  xlink:href='#3-min' begin='1min' attributeType='XML' attributeName='opacity' from='0' to='1' dur='60s'  values='0; 1; 1; 0' keyTimes='0; 0.01; 0.99; 1' fill='freeze' repeatCount='0'/>
<animate  xlink:href='#2-min' begin='2min' attributeType='XML' attributeName='opacity' from='0' to='1' dur='60s'  values='0; 1; 1; 0' keyTimes='0; 0.01; 0.99; 1' fill='freeze' repeatCount='0'/>
<animate  xlink:href='#1-min' begin='3min' attributeType='XML' attributeName='opacity' from='0' to='1' dur='60s'  values='0; 1; 1; 0' keyTimes='0; 0.01; 0.99; 1' fill='freeze' repeatCount='0'/>
<animate  xlink:href='#0-min' begin='4min' attributeType='XML' attributeName='opacity' from='0' to='1' dur='0.1s' fill='freeze' repeatCount='0'/>
</svg>"

Leave a comment

Your email address will not be published. Required fields are marked *