How to animate a border?

Question

I want to create a circling border, as seen in the second state of this object. So the loading icon. How would I do that with JavaScript?

I'm not looking for someone writing out the full code, but would like some direction to what selectors etc to research.

Answer 1

Is quite easy. Basically you start with a circle with a certain width and height, a full border-radius and a transition to it. Then on hover for example, you increase the width of that circle. Doing this will smootly transform that circle into a rectangle. If you dont manage to make it work, i`l create some examples for you.

Take a look at this(hover on the circle)

 div { width: 50px; height: 50px; border: 3px solid green; border-radius: 30px; margin:0 auto; transition: .5s; } div:hover{ width: 200px; background-color: green; } 

 <div></div> 

From here on you can modifiy it to fit your needs.