Выходит объект за пределы круга SVG

.box { 
  height:300px; 
  width:300px; 
  display:inline-block; 
} 
.timer svg { 
  width: 100%; 
  height: 100%; 
  display: inline-block; 
  overflow: visible; 
  -webkit-transform: rotate(-90deg); 
  transform: rotate(-90deg); 
} 
 
.timer svg circle { 
  stroke-dashoffset: 0; 
  stroke-width: 12px; 
} 
.timer svg circle#ok2 { 
  stroke-width: 16px; 
  stroke-dashoffset: 10; 
  -webkit-transition: stroke-dashoffset 1s linear; 
  transition: stroke-dashoffset 1s linear; 
} 
.timer svg circle#ok3, 
.timer svg circle#ok5 { 
  stroke-width: 11px; 
  -webkit-transition: -webkit-transform 1s linear; 
  transition: -webkit-transform 1s linear; 
  transition: transform 1s linear; 
  transition: transform 1s linear, -webkit-transform 1s linear; 
  -webkit-transform: rotate(0deg); 
  transform: rotate(0deg); 
  -webkit-transform-origin: 0 0; 
  transform-origin: 0 0; 
} 
.timer svg #g { 
  -webkit-transition: -webkit-transform 1s linear; 
  transition: -webkit-transform 1s linear; 
  transition: transform 1s linear; 
  transition: transform 1s linear, -webkit-transform 1s linear; 
  -webkit-transform: rotate(0deg); 
  transform: rotate(0deg); 
  -webkit-transform-origin: center center; 
  transform-origin: center center; 
} 
.timer svg[data-pct='0'] #ok2 { 
  stroke-dashoffset: 0; 
} 
.timer svg[data-pct='0'] #g { 
  -webkit-transform: rotate(0deg); 
  transform: rotate(0deg); 
} 
.timer svg[data-pct='1'] #ok2 { 
  stroke-dashoffset: 11.9296; 
} 
.timer svg[data-pct='1'] #g { 
  -webkit-transform: rotate(-3.6deg); 
  transform: rotate(-3.6deg); 
} 
.timer svg[data-pct='2'] #ok2 { 
  stroke-dashoffset: 23.8592; 
} 
.timer svg[data-pct='2'] #g { 
  -webkit-transform: rotate(-7.2deg); 
  transform: rotate(-7.2deg); 
} 
.timer svg[data-pct='3'] #ok2 { 
  stroke-dashoffset: 35.7888; 
} 
.timer svg[data-pct='3'] #g { 
  -webkit-transform: rotate(-10.8deg); 
  transform: rotate(-10.8deg); 
} 
.timer svg[data-pct='4'] #ok2 { 
  stroke-dashoffset: 47.7184; 
} 
.timer svg[data-pct='4'] #g { 
  -webkit-transform: rotate(-14.4deg); 
  transform: rotate(-14.4deg); 
} 
.timer svg[data-pct='5'] #ok2 { 
  stroke-dashoffset: 59.648; 
} 
.timer svg[data-pct='5'] #g { 
  -webkit-transform: rotate(-18deg); 
  transform: rotate(-18deg); 
} 
.timer svg[data-pct='6'] #ok2 { 
  stroke-dashoffset: 71.5776; 
} 
.timer svg[data-pct='6'] #g { 
  -webkit-transform: rotate(-21.6deg); 
  transform: rotate(-21.6deg); 
} 
.timer svg[data-pct='7'] #ok2 { 
  stroke-dashoffset: 83.50720000000001; 
} 
.timer svg[data-pct='7'] #g { 
  -webkit-transform: rotate(-25.2deg); 
  transform: rotate(-25.2deg); 
} 
.timer svg[data-pct='8'] #ok2 { 
  stroke-dashoffset: 95.4368; 
} 
.timer svg[data-pct='8'] #g { 
  -webkit-transform: rotate(-28.8deg); 
  transform: rotate(-28.8deg); 
} 
.timer svg[data-pct='9'] #ok2 { 
  stroke-dashoffset: 107.3664; 
} 
.timer svg[data-pct='9'] #g { 
  -webkit-transform: rotate(-32.4deg); 
  transform: rotate(-32.4deg); 
} 
.timer svg[data-pct='10'] #ok2 { 
  stroke-dashoffset: 119.296; 
} 
.timer svg[data-pct='10'] #g { 
  -webkit-transform: rotate(-36deg); 
  transform: rotate(-36deg); 
} 
.timer svg[data-pct='11'] #ok2 { 
  stroke-dashoffset: 131.22560000000001; 
} 
.timer svg[data-pct='11'] #g { 
  -webkit-transform: rotate(-39.6deg); 
  transform: rotate(-39.6deg); 
} 
.timer svg[data-pct='12'] #ok2 { 
  stroke-dashoffset: 143.1552; 
} 
.timer svg[data-pct='12'] #g { 
  -webkit-transform: rotate(-43.2deg); 
  transform: rotate(-43.2deg); 
} 
.timer svg[data-pct='13'] #ok2 { 
  stroke-dashoffset: 155.0848; 
} 
.timer svg[data-pct='13'] #g { 
  -webkit-transform: rotate(-46.800000000000004deg); 
  transform: rotate(-46.800000000000004deg); 
} 
.timer svg[data-pct='14'] #ok2 { 
  stroke-dashoffset: 167.01440000000002; 
} 
.timer svg[data-pct='14'] #g { 
  -webkit-transform: rotate(-50.4deg); 
  transform: rotate(-50.4deg); 
} 
.timer svg[data-pct='15'] #ok2 { 
  stroke-dashoffset: 178.94400000000002; 
} 
.timer svg[data-pct='15'] #g { 
  -webkit-transform: rotate(-54deg); 
  transform: rotate(-54deg); 
} 
.timer svg[data-pct='16'] #ok2 { 
  stroke-dashoffset: 190.8736; 
} 
.timer svg[data-pct='16'] #g { 
  -webkit-transform: rotate(-57.6deg); 
  transform: rotate(-57.6deg); 
} 
.timer svg[data-pct='17'] #ok2 { 
  stroke-dashoffset: 202.8032; 
} 
.timer svg[data-pct='17'] #g { 
  -webkit-transform: rotate(-61.2deg); 
  transform: rotate(-61.2deg); 
} 
.timer svg[data-pct='18'] #ok2 { 
  stroke-dashoffset: 214.7328; 
} 
.timer svg[data-pct='18'] #g { 
  -webkit-transform: rotate(-64.8deg); 
  transform: rotate(-64.8deg); 
} 
.timer svg[data-pct='19'] #ok2 { 
  stroke-dashoffset: 226.66240000000002; 
} 
.timer svg[data-pct='19'] #g { 
  -webkit-transform: rotate(-68.4deg); 
  transform: rotate(-68.4deg); 
} 
.timer svg[data-pct='20'] #ok2 { 
  stroke-dashoffset: 238.592; 
} 
.timer svg[data-pct='20'] #g { 
  -webkit-transform: rotate(-72deg); 
  transform: rotate(-72deg); 
} 
.timer svg[data-pct='21'] #ok2 { 
  stroke-dashoffset: 250.5216; 
} 
.timer svg[data-pct='21'] #g { 
  -webkit-transform: rotate(-75.60000000000001deg); 
  transform: rotate(-75.60000000000001deg); 
} 
.timer svg[data-pct='22'] #ok2 { 
  stroke-dashoffset: 262.45120000000003; 
} 
.timer svg[data-pct='22'] #g { 
  -webkit-transform: rotate(-79.2deg); 
  transform: rotate(-79.2deg); 
} 
.timer svg[data-pct='23'] #ok2 { 
  stroke-dashoffset: 274.3808; 
} 
.timer svg[data-pct='23'] #g { 
  -webkit-transform: rotate(-82.8deg); 
  transform: rotate(-82.8deg); 
} 
.timer svg[data-pct='24'] #ok2 { 
  stroke-dashoffset: 286.3104; 
} 
.timer svg[data-pct='24'] #g { 
  -webkit-transform: rotate(-86.4deg); 
  transform: rotate(-86.4deg); 
} 
.timer svg[data-pct='25'] #ok2 { 
  stroke-dashoffset: 298.24; 
} 
.timer svg[data-pct='25'] #g { 
  -webkit-transform: rotate(-90deg); 
  transform: rotate(-90deg); 
} 
.timer svg[data-pct='26'] #ok2 { 
  stroke-dashoffset: 310.1696; 
} 
.timer svg[data-pct='26'] #g { 
  -webkit-transform: rotate(-93.60000000000001deg); 
  transform: rotate(-93.60000000000001deg); 
} 
.timer svg[data-pct='27'] #ok2 { 
  stroke-dashoffset: 322.0992; 
} 
.timer svg[data-pct='27'] #g { 
  -webkit-transform: rotate(-97.2deg); 
  transform: rotate(-97.2deg); 
} 
.timer svg[data-pct='28'] #ok2 { 
  stroke-dashoffset: 334.02880000000005; 
} 
.timer svg[data-pct='28'] #g { 
  -webkit-transform: rotate(-100.8deg); 
  transform: rotate(-100.8deg); 
} 
.timer svg[data-pct='29'] #ok2 { 
  stroke-dashoffset: 345.95840000000004; 
} 
.timer svg[data-pct='29'] #g { 
  -webkit-transform: rotate(-104.4deg); 
  transform: rotate(-104.4deg); 
} 
.timer svg[data-pct='30'] #ok2 { 
  stroke-dashoffset: 357.88800000000003; 
} 
.timer svg[data-pct='30'] #g { 
  -webkit-transform: rotate(-108deg); 
  transform: rotate(-108deg); 
} 
.timer svg[data-pct='31'] #ok2 { 
  stroke-dashoffset: 369.8176; 
} 
.timer svg[data-pct='31'] #g { 
  -webkit-transform: rotate(-111.60000000000001deg); 
  transform: rotate(-111.60000000000001deg); 
} 
.timer svg[data-pct='32'] #ok2 { 
  stroke-dashoffset: 381.7472; 
} 
.timer svg[data-pct='32'] #g { 
  -webkit-transform: rotate(-115.2deg); 
  transform: rotate(-115.2deg); 
} 
.timer svg[data-pct='33'] #ok2 { 
  stroke-dashoffset: 393.6768; 
} 
.timer svg[data-pct='33'] #g { 
  -webkit-transform: rotate(-118.8deg); 
  transform: rotate(-118.8deg); 
} 
.timer svg[data-pct='34'] #ok2 { 
  stroke-dashoffset: 405.6064; 
} 
.timer svg[data-pct='34'] #g { 
  -webkit-transform: rotate(-122.4deg); 
  transform: rotate(-122.4deg); 
} 
.timer svg[data-pct='35'] #ok2 { 
  stroke-dashoffset: 417.536; 
} 
.timer svg[data-pct='35'] #g { 
  -webkit-transform: rotate(-126deg); 
  transform: rotate(-126deg); 
} 
.timer svg[data-pct='36'] #ok2 { 
  stroke-dashoffset: 429.4656; 
} 
.timer svg[data-pct='36'] #g { 
  -webkit-transform: rotate(-129.6deg); 
  transform: rotate(-129.6deg); 
} 
.timer svg[data-pct='37'] #ok2 { 
  stroke-dashoffset: 441.39520000000005; 
} 
.timer svg[data-pct='37'] #g { 
  -webkit-transform: rotate(-133.20000000000002deg); 
  transform: rotate(-133.20000000000002deg); 
} 
.timer svg[data-pct='38'] #ok2 { 
  stroke-dashoffset: 453.32480000000004; 
} 
.timer svg[data-pct='38'] #g { 
  -webkit-transform: rotate(-136.8deg); 
  transform: rotate(-136.8deg); 
} 
.timer svg[data-pct='39'] #ok2 { 
  stroke-dashoffset: 465.25440000000003; 
} 
.timer svg[data-pct='39'] #g { 
  -webkit-transform: rotate(-140.4deg); 
  transform: rotate(-140.4deg); 
} 
.timer svg[data-pct='40'] #ok2 { 
  stroke-dashoffset: 477.184; 
} 
.timer svg[data-pct='40'] #g { 
  -webkit-transform: rotate(-144deg); 
  transform: rotate(-144deg); 
} 
.timer svg[data-pct='41'] #ok2 { 
  stroke-dashoffset: 489.1136; 
} 
.timer svg[data-pct='41'] #g { 
  -webkit-transform: rotate(-147.6deg); 
  transform: rotate(-147.6deg); 
} 
.timer svg[data-pct='42'] #ok2 { 
  stroke-dashoffset: 501.0432; 
} 
.timer svg[data-pct='42'] #g { 
  -webkit-transform: rotate(-151.20000000000002deg); 
  transform: rotate(-151.20000000000002deg); 
} 
.timer svg[data-pct='43'] #ok2 { 
  stroke-dashoffset: 512.9728; 
} 
.timer svg[data-pct='43'] #g { 
  -webkit-transform: rotate(-154.8deg); 
  transform: rotate(-154.8deg); 
} 
.timer svg[data-pct='44'] #ok2 { 
  stroke-dashoffset: 524.9024000000001; 
} 
.timer svg[data-pct='44'] #g { 
  -webkit-transform: rotate(-158.4deg); 
  transform: rotate(-158.4deg); 
} 
.timer svg[data-pct='45'] #ok2 { 
  stroke-dashoffset: 536.832; 
} 
.timer svg[data-pct='45'] #g { 
  -webkit-transform: rotate(-162deg); 
  transform: rotate(-162deg); 
} 
.timer svg[data-pct='46'] #ok2 { 
  stroke-dashoffset: 548.7616; 
} 
.timer svg[data-pct='46'] #g { 
  -webkit-transform: rotate(-165.6deg); 
  transform: rotate(-165.6deg); 
} 
.timer svg[data-pct='47'] #ok2 { 
  stroke-dashoffset: 560.6912; 
} 
.timer svg[data-pct='47'] #g { 
  -webkit-transform: rotate(-169.20000000000002deg); 
  transform: rotate(-169.20000000000002deg); 
} 
.timer svg[data-pct='48'] #ok2 { 
  stroke-dashoffset: 572.6208; 
} 
.timer svg[data-pct='48'] #g { 
  -webkit-transform: rotate(-172.8deg); 
  transform: rotate(-172.8deg); 
} 
.timer svg[data-pct='49'] #ok2 { 
  stroke-dashoffset: 584.5504000000001; 
} 
.timer svg[data-pct='49'] #g { 
  -webkit-transform: rotate(-176.4deg); 
  transform: rotate(-176.4deg); 
} 
.timer svg[data-pct='50'] #ok2 { 
  stroke-dashoffset: 596.48; 
} 
.timer svg[data-pct='50'] #g { 
  -webkit-transform: rotate(-180deg); 
  transform: rotate(-180deg); 
} 
.timer svg[data-pct='51'] #ok2 { 
  stroke-dashoffset: 608.4096000000001; 
} 
.timer svg[data-pct='51'] #g { 
  -webkit-transform: rotate(-183.6deg); 
  transform: rotate(-183.6deg); 
} 
.timer svg[data-pct='52'] #ok2 { 
  stroke-dashoffset: 620.3392; 
} 
.timer svg[data-pct='52'] #g { 
  -webkit-transform: rotate(-187.20000000000002deg); 
  transform: rotate(-187.20000000000002deg); 
} 
.timer svg[data-pct='53'] #ok2 { 
  stroke-dashoffset: 632.2688; 
} 
.timer svg[data-pct='53'] #g { 
  -webkit-transform: rotate(-190.8deg); 
  transform: rotate(-190.8deg); 
} 
.timer svg[data-pct='54'] #ok2 { 
  stroke-dashoffset: 644.1984; 
} 
.timer svg[data-pct='54'] #g { 
  -webkit-transform: rotate(-194.4deg); 
  transform: rotate(-194.4deg); 
} 
.timer svg[data-pct='55'] #ok2 { 
  stroke-dashoffset: 656.128; 
} 
.timer svg[data-pct='55'] #g { 
  -webkit-transform: rotate(-198deg); 
  transform: rotate(-198deg); 
} 
.timer svg[data-pct='56'] #ok2 { 
  stroke-dashoffset: 668.0576000000001; 
} 
.timer svg[data-pct='56'] #g { 
  -webkit-transform: rotate(-201.6deg); 
  transform: rotate(-201.6deg); 
} 
.timer svg[data-pct='57'] #ok2 { 
  stroke-dashoffset: 679.9872; 
} 
.timer svg[data-pct='57'] #g { 
  -webkit-transform: rotate(-205.20000000000002deg); 
  transform: rotate(-205.20000000000002deg); 
} 
.timer svg[data-pct='58'] #ok2 { 
  stroke-dashoffset: 691.9168000000001; 
} 
.timer svg[data-pct='58'] #g { 
  -webkit-transform: rotate(-208.8deg); 
  transform: rotate(-208.8deg); 
} 
.timer svg[data-pct='59'] #ok2 { 
  stroke-dashoffset: 703.8464; 
} 
.timer svg[data-pct='59'] #g { 
  -webkit-transform: rotate(-212.4deg); 
  transform: rotate(-212.4deg); 
} 
.timer svg[data-pct='60'] #ok2 { 
  stroke-dashoffset: 715.7760000000001; 
} 
.timer svg[data-pct='60'] #g { 
  -webkit-transform: rotate(-216deg); 
  transform: rotate(-216deg); 
} 
.timer svg[data-pct='61'] #ok2 { 
  stroke-dashoffset: 727.7056; 
} 
.timer svg[data-pct='61'] #g { 
  -webkit-transform: rotate(-219.6deg); 
  transform: rotate(-219.6deg); 
} 
.timer svg[data-pct='62'] #ok2 { 
  stroke-dashoffset: 739.6352; 
} 
.timer svg[data-pct='62'] #g { 
  -webkit-transform: rotate(-223.20000000000002deg); 
  transform: rotate(-223.20000000000002deg); 
} 
.timer svg[data-pct='63'] #ok2 { 
  stroke-dashoffset: 751.5648; 
} 
.timer svg[data-pct='63'] #g { 
  -webkit-transform: rotate(-226.8deg); 
  transform: rotate(-226.8deg); 
} 
.timer svg[data-pct='64'] #ok2 { 
  stroke-dashoffset: 763.4944; 
} 
.timer svg[data-pct='64'] #g { 
  -webkit-transform: rotate(-230.4deg); 
  transform: rotate(-230.4deg); 
} 
.timer svg[data-pct='65'] #ok2 { 
  stroke-dashoffset: 775.4240000000001; 
} 
.timer svg[data-pct='65'] #g { 
  -webkit-transform: rotate(-234deg); 
  transform: rotate(-234deg); 
} 
.timer svg[data-pct='66'] #ok2 { 
  stroke-dashoffset: 787.3536; 
} 
.timer svg[data-pct='66'] #g { 
  -webkit-transform: rotate(-237.6deg); 
  transform: rotate(-237.6deg); 
} 
.timer svg[data-pct='67'] #ok2 { 
  stroke-dashoffset: 799.2832000000001; 
} 
.timer svg[data-pct='67'] #g { 
  -webkit-transform: rotate(-241.20000000000002deg); 
  transform: rotate(-241.20000000000002deg); 
} 
.timer svg[data-pct='68'] #ok2 { 
  stroke-dashoffset: 811.2128; 
} 
.timer svg[data-pct='68'] #g { 
  -webkit-transform: rotate(-244.8deg); 
  transform: rotate(-244.8deg); 
} 
.timer svg[data-pct='69'] #ok2 { 
  stroke-dashoffset: 823.1424000000001; 
} 
.timer svg[data-pct='69'] #g { 
  -webkit-transform: rotate(-248.4deg); 
  transform: rotate(-248.4deg); 
} 
.timer svg[data-pct='70'] #ok2 { 
  stroke-dashoffset: 835.072; 
} 
.timer svg[data-pct='70'] #g { 
  -webkit-transform: rotate(-252deg); 
  transform: rotate(-252deg); 
} 
.timer svg[data-pct='71'] #ok2 { 
  stroke-dashoffset: 847.0016; 
} 
.timer svg[data-pct='71'] #g { 
  -webkit-transform: rotate(-255.6deg); 
  transform: rotate(-255.6deg); 
} 
.timer svg[data-pct='72'] #ok2 { 
  stroke-dashoffset: 858.9312; 
} 
.timer svg[data-pct='72'] #g { 
  -webkit-transform: rotate(-259.2deg); 
  transform: rotate(-259.2deg); 
} 
.timer svg[data-pct='73'] #ok2 { 
  stroke-dashoffset: 870.8608; 
} 
.timer svg[data-pct='73'] #g { 
  -webkit-transform: rotate(-262.8deg); 
  transform: rotate(-262.8deg); 
} 
.timer svg[data-pct='74'] #ok2 { 
  stroke-dashoffset: 882.7904000000001; 
} 
.timer svg[data-pct='74'] #g { 
  -webkit-transform: rotate(-266.40000000000003deg); 
  transform: rotate(-266.40000000000003deg); 
} 
.timer svg[data-pct='75'] #ok2 { 
  stroke-dashoffset: 894.72; 
} 
.timer svg[data-pct='75'] #g { 
  -webkit-transform: rotate(-270deg); 
  transform: rotate(-270deg); 
} 
.timer svg[data-pct='76'] #ok2 { 
  stroke-dashoffset: 906.6496000000001; 
} 
.timer svg[data-pct='76'] #g { 
  -webkit-transform: rotate(-273.6deg); 
  transform: rotate(-273.6deg); 
} 
.timer svg[data-pct='77'] #ok2 { 
  stroke-dashoffset: 918.5792; 
} 
.timer svg[data-pct='77'] #g { 
  -webkit-transform: rotate(-277.2deg); 
  transform: rotate(-277.2deg); 
} 
.timer svg[data-pct='78'] #ok2 { 
  stroke-dashoffset: 930.5088000000001; 
} 
.timer svg[data-pct='78'] #g { 
  -webkit-transform: rotate(-280.8deg); 
  transform: rotate(-280.8deg); 
} 
.timer svg[data-pct='79'] #ok2 { 
  stroke-dashoffset: 942.4384; 
} 
.timer svg[data-pct='79'] #g { 
  -webkit-transform: rotate(-284.40000000000003deg); 
  transform: rotate(-284.40000000000003deg); 
} 
.timer svg[data-pct='80'] #ok2 { 
  stroke-dashoffset: 954.368; 
} 
.timer svg[data-pct='80'] #g { 
  -webkit-transform: rotate(-288deg); 
  transform: rotate(-288deg); 
} 
.timer svg[data-pct='81'] #ok2 { 
  stroke-dashoffset: 966.2976000000001; 
} 
.timer svg[data-pct='81'] #g { 
  -webkit-transform: rotate(-291.6deg); 
  transform: rotate(-291.6deg); 
} 
.timer svg[data-pct='82'] #ok2 { 
  stroke-dashoffset: 978.2272; 
} 
.timer svg[data-pct='82'] #g { 
  -webkit-transform: rotate(-295.2deg); 
  transform: rotate(-295.2deg); 
} 
.timer svg[data-pct='83'] #ok2 { 
  stroke-dashoffset: 990.1568000000001; 
} 
.timer svg[data-pct='83'] #g { 
  -webkit-transform: rotate(-298.8deg); 
  transform: rotate(-298.8deg); 
} 
.timer svg[data-pct='84'] #ok2 { 
  stroke-dashoffset: 1002.0864; 
} 
.timer svg[data-pct='84'] #g { 
  -webkit-transform: rotate(-302.40000000000003deg); 
  transform: rotate(-302.40000000000003deg); 
} 
.timer svg[data-pct='85'] #ok2 { 
  stroke-dashoffset: 1014.0160000000001; 
} 
.timer svg[data-pct='85'] #g { 
  -webkit-transform: rotate(-306deg); 
  transform: rotate(-306deg); 
} 
.timer svg[data-pct='86'] #ok2 { 
  stroke-dashoffset: 1025.9456; 
} 
.timer svg[data-pct='86'] #g { 
  -webkit-transform: rotate(-309.6deg); 
  transform: rotate(-309.6deg); 
} 
.timer svg[data-pct='87'] #ok2 { 
  stroke-dashoffset: 1037.8752; 
} 
.timer svg[data-pct='87'] #g { 
  -webkit-transform: rotate(-313.2deg); 
  transform: rotate(-313.2deg); 
} 
.timer svg[data-pct='88'] #ok2 { 
  stroke-dashoffset: 1049.8048000000001; 
} 
.timer svg[data-pct='88'] #g { 
  -webkit-transform: rotate(-316.8deg); 
  transform: rotate(-316.8deg); 
} 
.timer svg[data-pct='89'] #ok2 { 
  stroke-dashoffset: 1061.7344; 
} 
.timer svg[data-pct='89'] #g { 
  -webkit-transform: rotate(-320.40000000000003deg); 
  transform: rotate(-320.40000000000003deg); 
} 
.timer svg[data-pct='90'] #ok2 { 
  stroke-dashoffset: 1073.664; 
} 
.timer svg[data-pct='90'] #g { 
  -webkit-transform: rotate(-324deg); 
  transform: rotate(-324deg); 
} 
.timer svg[data-pct='91'] #ok2 { 
  stroke-dashoffset: 1085.5936000000002; 
} 
.timer svg[data-pct='91'] #g { 
  -webkit-transform: rotate(-327.6deg); 
  transform: rotate(-327.6deg); 
} 
.timer svg[data-pct='92'] #ok2 { 
  stroke-dashoffset: 1097.5232; 
} 
.timer svg[data-pct='92'] #g { 
  -webkit-transform: rotate(-331.2deg); 
  transform: rotate(-331.2deg); 
} 
.timer svg[data-pct='93'] #ok2 { 
  stroke-dashoffset: 1109.4528; 
} 
.timer svg[data-pct='93'] #g { 
  -webkit-transform: rotate(-334.8deg); 
  transform: rotate(-334.8deg); 
} 
.timer svg[data-pct='94'] #ok2 { 
  stroke-dashoffset: 1121.3824; 
} 
.timer svg[data-pct='94'] #g { 
  -webkit-transform: rotate(-338.40000000000003deg); 
  transform: rotate(-338.40000000000003deg); 
} 
.timer svg[data-pct='95'] #ok2 { 
  stroke-dashoffset: 1133.3120000000001; 
} 
.timer svg[data-pct='95'] #g { 
  -webkit-transform: rotate(-342deg); 
  transform: rotate(-342deg); 
} 
.timer svg[data-pct='96'] #ok2 { 
  stroke-dashoffset: 1145.2416; 
} 
.timer svg[data-pct='96'] #g { 
  -webkit-transform: rotate(-345.6deg); 
  transform: rotate(-345.6deg); 
} 
.timer svg[data-pct='97'] #ok2 { 
  stroke-dashoffset: 1157.1712; 
} 
.timer svg[data-pct='97'] #g { 
  -webkit-transform: rotate(-349.2deg); 
  transform: rotate(-349.2deg); 
} 
.timer svg[data-pct='98'] #ok2 { 
  stroke-dashoffset: 1169.1008000000002; 
} 
.timer svg[data-pct='98'] #g { 
  -webkit-transform: rotate(-352.8deg); 
  transform: rotate(-352.8deg); 
} 
.timer svg[data-pct='99'] #ok2 { 
  stroke-dashoffset: 1181.0304; 
} 
.timer svg[data-pct='99'] #g { 
  -webkit-transform: rotate(-356.40000000000003deg); 
  transform: rotate(-356.40000000000003deg); 
} 
.timer svg[data-pct='100'] #ok2 { 
  stroke-dashoffset: 1192.96; 
} 
.timer svg[data-pct='100'] #g { 
  -webkit-transform: rotate(-360deg); 
  transform: rotate(-360deg); 
}

<div class="box"> 
  <div class="timer"> 
     <svg id="timer" viewBox="0 0 410 410" preserveAspectRatio="xMinYMin meet" data-pct="50" class="show"> 
        <linearGradient id="linear-gradient" x1="50%" y1="0" x2="0" y2="100%"> 
           <stop offset="0%" stop-color="rgba(250,92,86,1)"></stop> 
           <stop offset="100%" stop-color="rgba(248,180,90,1)"></stop> 
        </linearGradient> 
        <circle id="ok" r="190" cx="210" cy="210" stroke="#332e55" fill="transparent" stroke-dasharray="1193.96" stroke-width="5px" stroke-dashoffset="0"></circle> 
        <circle id="ok2" r="190" cx="210" cy="210" stroke="url(#linear-gradient)" fill="transparent" stroke-dasharray="1193.96" stroke-dashoffset="0"></circle> 
        <circle id="ok5" r="5.5" cx="400" cy="205" stroke="url(#linear-gradient)" fill="#101014" stroke-dasharray="1192.96" stroke-dashoffset="0"></circle> 
        <g id="g"> 
           <circle id="ok4" r="195" cx="210" cy="210" fill="transparent" stroke-dasharray="1192.96" stroke-dashoffset="0"></circle> 
           <circle id="ok3" r="5.5" cx="400" cy="205" stroke="url(#linear-gradient)" fill="#101014" stroke-dasharray="1192.96" stroke-dashoffset="0"></circle> 
        </g> 
     </svg> 
  </div> 
</div> 
 
<div class="box"> 
  <div class="timer"> 
     <svg id="timer" viewBox="0 0 410 410" preserveAspectRatio="xMinYMin meet" data-pct="25" class="show"> 
        <linearGradient id="linear-gradient" x1="50%" y1="0" x2="0" y2="100%"> 
           <stop offset="0%" stop-color="rgba(250,92,86,1)"></stop> 
           <stop offset="100%" stop-color="rgba(248,180,90,1)"></stop> 
        </linearGradient> 
        <circle id="ok" r="190" cx="210" cy="210" stroke="#332e55" fill="transparent" stroke-dasharray="1193.96" stroke-width="5px" stroke-dashoffset="0"></circle> 
        <circle id="ok2" r="190" cx="210" cy="210" stroke="url(#linear-gradient)" fill="transparent" stroke-dasharray="1193.96" stroke-dashoffset="0"></circle> 
        <circle id="ok5" r="5.5" cx="400" cy="205" stroke="url(#linear-gradient)" fill="#101014" stroke-dasharray="1192.96" stroke-dashoffset="0"></circle> 
        <g id="g"> 
           <circle id="ok4" r="195" cx="210" cy="210" fill="transparent" stroke-dasharray="1192.96" stroke-dashoffset="0"></circle> 
           <circle id="ok3" r="5.5" cx="400" cy="205" stroke="url(#linear-gradient)" fill="#101014" stroke-dasharray="1192.96" stroke-dashoffset="0"></circle> 
        </g> 
     </svg> 
  </div> 
</div> 
<div class="box"> 
  <div class="timer"> 
     <svg id="timer" viewBox="0 0 410 410" preserveAspectRatio="xMinYMin meet" data-pct="75" class="show"> 
        <linearGradient id="linear-gradient" x1="50%" y1="0" x2="0" y2="100%"> 
           <stop offset="0%" stop-color="rgba(250,92,86,1)"></stop> 
           <stop offset="100%" stop-color="rgba(248,180,90,1)"></stop> 
        </linearGradient> 
        <circle id="ok" r="190" cx="210" cy="210" stroke="#332e55" fill="transparent" stroke-dasharray="1193.96" stroke-width="5px" stroke-dashoffset="0"></circle> 
        <circle id="ok2" r="190" cx="210" cy="210" stroke="url(#linear-gradient)" fill="transparent" stroke-dasharray="1193.96" stroke-dashoffset="0"></circle> 
        <circle id="ok5" r="5.5" cx="400" cy="205" stroke="url(#linear-gradient)" fill="#101014" stroke-dasharray="1192.96" stroke-dashoffset="0"></circle> 
        <g id="g"> 
           <circle id="ok4" r="195" cx="210" cy="210" fill="transparent" stroke-dasharray="1192.96" stroke-dashoffset="0"></circle> 
           <circle id="ok3" r="5.5" cx="400" cy="205" stroke="url(#linear-gradient)" fill="#101014" stroke-dasharray="1192.96" stroke-dashoffset="0"></circle> 
        </g> 
     </svg> 
  </div> 
</div> 
 
<div class="box"> 
  <div class="timer"> 
     <svg id="timer" viewBox="0 0 410 410" preserveAspectRatio="xMinYMin meet" data-pct="100" class="show"> 
        <linearGradient id="linear-gradient" x1="50%" y1="0" x2="0" y2="100%"> 
           <stop offset="0%" stop-color="rgba(250,92,86,1)"></stop> 
           <stop offset="100%" stop-color="rgba(248,180,90,1)"></stop> 
        </linearGradient> 
        <circle id="ok" r="190" cx="210" cy="210" stroke="#332e55" fill="transparent" stroke-dasharray="1193.96" stroke-width="5px" stroke-dashoffset="0"></circle> 
        <circle id="ok2" r="190" cx="210" cy="210" stroke="url(#linear-gradient)" fill="transparent" stroke-dasharray="1193.96" stroke-dashoffset="0"></circle> 
        <circle id="ok5" r="5.5" cx="400" cy="205" stroke="url(#linear-gradient)" fill="#101014" stroke-dasharray="1192.96" stroke-dashoffset="0"></circle> 
        <g id="g"> 
           <circle id="ok4" r="195" cx="210" cy="210" fill="transparent" stroke-dasharray="1192.96" stroke-dashoffset="0"></circle> 
           <circle id="ok3" r="5.5" cx="400" cy="205" stroke="url(#linear-gradient)" fill="#101014" stroke-dasharray="1192.96" stroke-dashoffset="0"></circle> 
        </g> 
     </svg> 
  </div> 
</div>