HTML:
<div class="icon">
<div class="iconBorder">
<div class="iconContent"></div>
</div>
</div>
Javascript:
steps = 1
loops = 100 / steps
increment = 360 / loops
half = loops / 2
percentage = 35
if (percentage < half) {
nextdeg = 90 + (increment * percentage)
$('.icon .iconBorder').css('background-image', 'linear-gradient(90deg, #263238 50%, transparent 50%, transparent), linear-gradient(' + nextdeg + 'deg, white 50%, #263238 50%, #263238)')
} else {
nextdeg = -90 + (increment * (percentage - half))
$('.icon .iconBorder').css('background-image', 'linear-gradient(' + nextdeg + 'deg, white 50%, transparent 50%, transparent), linear-gradient(270deg, white 50%, #263238 50%, #263238)')
}
I have the code above and a JSFiddle which creates a border around a circular icon depending on the value of percentage which varies. I would like to animate the border around the icon so that it appears to start at 0% (0˚) and then move to the percentage supplied, in this case 65% (126˚).
I also want the animate to ease in and out. I'm not sure how I would achieve this since I could not simply use a CSS transition as I'm using a CSS hack to create the border using a gradient background in the first place. Any ideas on how to do this? Thanks.
