I borrowed an animated circle with a timer. I need to adjust the width of the animated arch within the circle.
Can someone help me do this? I'm having trouble figuring it out on my own.
You can access the jsFiddle here
This is where I have set the width of the animated arch in the CSS:
CSS:
.timer > #slice > .pie {
border: 5px solid blue;
position:absolute;
width:160px; /* 170 - (2 * border width) */
height:160px; /* 170 - (2 * border width) */
clip:rect(0em,0.5em,1em,0em);
-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
border-radius:0.5em;
}
JS:
$('div.timer'+instance).html('<div class="percent"></div><div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');