Starting minimum working example of an animated circular timer countdown graphic document body style height 100pt let style document createElement style document body appendChild style style type text css style innerHTML countdown position relative margin auto margin top 20px height 40px width 40px text align center border 1px solid red countdown number color blue display inline block line height 40px svg position absolute top 0 right 0 width 40px height 40px transform rotateY 180deg rotateZ 90deg circle stroke dasharray 113px stroke dashoffset 0px stroke linecap round stroke width 2px stroke blue fill none animation countdown 10s linear infinite forwards keyframes countdown from stroke dashoffset 0px to stroke dashoffset 113px function countTimer let timer document createElement div timer id countdown document body appendChild timer let div document createElement div div id countdown number timer appendChild div let svg document createElementNS http www w3 org 2000 svg svg svg id svg timer appendChild svg let svgcircle document createElementNS http www w3 org 2000 svg circle svg appendChild svgcircle svgcircle id circle svgcircle setAttribute cx 40 2 svgcircle setAttribute cy 40 2 svgcircle setAttribute r 40 2 2 svgcircle setAttribute fill 69b3a2 svgcircle setAttribute stroke black var countdownNumberEl document getElementById countdown number var countdown 10 countdownNumberEl textContent countdown setInterval function countdown countdown 0 10 countdown countdownNumberEl textContent countdown 1000 end setInterval end countTimer countTimer console log ready same as the prevous version but alls lots of customization such as the size thickness duration color and so on which can be passed into the function at runtime set changed on the fly document body style height 100pt let style document createElement style document body appendChild style style type text css style innerHTML countdown position relative text align center countdown number position absolute top 50 left 50 transform translate 50 50 svg position absolute top 0 right 0 width 100 height 100 transform rotateY 180deg rotateZ 90deg circle stroke dasharray 250px stroke dashoffset 0px stroke linecap round fill none animation countdown 10s linear infinite forwards keyframes countdown 0 stroke dashoffset 0px 100 stroke dashoffset 250px function findKeyframesRule rule var styleSheet style sheet loop through all the rules for var j 0 j styleSheet cssRules length j find the keyframe rule whose name matches our passed over parameter and return that rule if styleSheet cssRules j type 7 styleSheet cssRules j name rule return styleSheet cssRules j rule not found return null end findKeyframesRule function countTimer opt let timer document createElement div timer id countdown timer style width opt w px timer style height opt h px document body appendChild timer let div document createElement div div id countdown number div style font size opt fs div style color opt c timer appendChild div let svg document createElementNS http www w3 org 2000 svg svg svg id svg timer appendChild svg let svgcircle document createElementNS http www w3 org 2000 svg circle svg appendChild svgcircle svgcircle id circle svgcircle setAttribute cx opt w 2 svgcircle setAttribute cy opt h 2 svgcircle setAttribute r opt w 2 opt t 2 svgcircle setAttribute stroke width opt t svgcircle style stroke dasharray 2 Math PI opt w 0 5 px svgcircle style stroke opt c svgcircle setAttribute fill 69b3a2 svgcircle setAttribute stroke black svgcircle style animation countdown opt v s linear infinite forwards var keyframes findKeyframesRule countdown keyframes deleteRule 100 keyframes appendRule 100 stroke dashoffset 2 Math PI opt w 0 5 px var countdownNumberEl document getElementById countdown number var countdown opt v countdownNumberEl textContent countdown setInterval function countdown countdown 0 opt v countdown countdownNumberEl textContent countdown 1000 end setInterval end countTimer countTimer v 20 w 90 h 90 t 8 fs 50px c green console log ready extends the previous iteration but adds a heat transition option so the color changes from red to blue gradually as the time counts down document body style height 100pt let style document createElement style document body appendChild style style type text css style innerHTML countdown position relative text align center margin auto countdown number position absolute top 50 left 50 transform translate 50 50 svg position absolute top 0 right 0 width 100 height 100 transform rotateY 180deg rotateZ 90deg circle stroke dasharray 250px stroke dashoffset 0px stroke linecap round fill none animation countdown 10s linear infinite forwards keyframes countdown 0 stroke dashoffset 0px 100 stroke dashoffset 250px function findKeyframesRule rule var styleSheet style sheet loop through all the rules for var j 0 j styleSheet cssRules length j find the keyframe rule whose name matches our passed over parameter and return that rule if styleSheet cssRules j type 7 styleSheet cssRules j name rule return styleSheet cssRules j rule not found return null end findKeyframesRule function heatMapColorforValue value value 0 to 1 0 var h 1 0 value 240 return hsl h 100 50 function countTimer opt let timer document createElement div timer id countdown timer style width opt w px timer style height opt h px document body appendChild timer let div document createElement div div id countdown number div style font size opt fs div style color opt c heat red opt c timer appendChild div let svg document createElementNS http www w3 org 2000 svg svg svg id svg timer appendChild svg let svgcircle document createElementNS http www w3 org 2000 svg circle svg appendChild svgcircle svgcircle id circle svgcircle setAttribute cx opt w 2 svgcircle setAttribute cy opt h 2 svgcircle setAttribute r opt w 2 opt t 2 svgcircle setAttribute stroke width opt t svgcircle style stroke dasharray 2 Math PI opt w 0 5 px svgcircle style stroke opt c heat red opt c svgcircle setAttribute fill 69b3a2 svgcircle setAttribute stroke black svgcircle style animation countdown opt v s linear infinite forwards var keyframes findKeyframesRule countdown keyframes deleteRule 100 keyframes appendRule 100 stroke dashoffset 2 Math PI opt w 0 5 px var countdownNumberEl document getElementById countdown number var countdown opt v countdownNumberEl textContent countdown setInterval function countdown countdown 0 opt v countdown countdownNumberEl textContent countdown if opt c heat svgcircle style stroke heatMapColorforValue countdown opt v div style color heatMapColorforValue countdown opt v 1000 end setInterval end countTimer countTimer v 30 w 400 h 400 t 20 fs 250px c heat console log ready
opt w 0 5 px svgcircle style stroke opt c svgcircle setAttribute fill 69b3a2 svgcircle setAttribute stroke black svgcircle style animation countdown opt v s linear infinite forwards var keyframes findKeyframesRule countdown keyframes deleteRule 100 keyframes appendRule 100 stroke dashoffset 2 Math PI opt w 0 5 px var countdownNumberEl document getElementById countdown number var countdown opt v countdownNumberEl textContent countdown setInterval function countdown countdown 0 opt v countdown countdownNumberEl textContent countdown 1000 end setInterval end countTimer countTimer v 20 w 90 h 90 t 8 fs 50px c green console log ready extends the previous iteration but adds a heat transition option so the color changes from red to blue gradually as the time counts down document body style height 100pt let style document createElement style document body appendChild style style type text css style innerHTML countdown position relative text align center margin auto countdown number position absolute top 50 left 50 transform translate 50 50 svg position absolute top 0 right 0 width 100 height 100 transform rotateY 180deg rotateZ 90deg circle stroke dasharray 250px stroke dashoffset 0px stroke linecap round fill none animation countdown 10s linear infinite forwards keyframes countdown 0 stroke dashoffset 0px 100 stroke dashoffset 250px function findKeyframesRule rule var styleSheet style sheet loop through all the rules for var j 0 j styleSheet cssRules length j find the keyframe rule whose name matches our passed over parameter and return that rule if styleSheet cssRules j type 7 styleSheet cssRules j name rule return styleSheet cssRules j rule not found return null end findKeyframesRule function heatMapColorforValue value value 0 to 1 0 var h 1 0 value 240 return hsl h 100 50 function countTimer opt let timer document createElement div timer id countdown timer style width opt w px timer style height opt h px document body appendChild timer let div document createElement div div id countdown number div style font size opt fs div style color opt c heat red opt c timer appendChild div let svg document createElementNS http www w3 org 2000 svg svg svg id svg timer appendChild svg let svgcircle document createElementNS http www w3 org 2000 svg circle svg appendChild svgcircle svgcircle id circle svgcircle setAttribute cx opt w 2 svgcircle setAttribute cy opt h 2 svgcircle setAttribute r opt w 2 opt t 2 svgcircle setAttribute stroke width opt t svgcircle style stroke dasharray 2 Math PI opt w 0 5 px svgcircle style stroke opt c heat red opt c svgcircle setAttribute fill 69b3a2 svgcircle setAttribute stroke black svgcircle style animation countdown opt v s linear infinite forwards var keyframes findKeyframesRule countdown keyframes deleteRule 100 keyframes appendRule 100 stroke dashoffset 2 Math PI opt w 0 5 px var countdownNumberEl document getElementById countdown number var countdown opt v countdownNumberEl textContent countdown setInterval function countdown countdown 0 opt v countdown countdownNumberEl textContent countdown if opt c heat svgcircle style stroke heatMapColorforValue countdown opt v div style color heatMapColorforValue countdown opt v 1000 end setInterval end countTimer countTimer v 30 w 400 h 400 t 20 fs 250px c heat console log ready