I created stole an animated circle with a timer. I need to change the width of the animated arch of the circle.
How can I do that as I can't figure it out.
This is the jsFiddle
I am attaching the width of the animated arch with the following 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>');
You can do this in .timer > #slice > .pie{
.timer > #slice > .pie {
border: 10px solid blue;
position:absolute;
width:150px; /* 170 - (2 * border width) */
height:150px; /* 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;
}
I doubled the border
size and then made the width
and height
10px smaller.
you have to do changes in width attribute .
chnage Pixel level then it will work for you
width:160px; /* 170 - (2 * border width) */
Ex:- width:190px;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.