Animated spinner with css+jquery?

Question

css

Tell me, is there somewhere on the Internet an animated css spinner, scrolling to a specific area when loading a page.
I’ve been doing animation recently, I could only scroll along the axis of the entire figure, but how to make it so that for example
1. The color gradually changed to another (rim)
2. The animation started from an empty circle and ended at a certain pixel? Is it possible to do something like this with an additional superimposed shape? Or do you need special js plugins?

It is important that it stops at the end of the animation and takes up a certain number of pixels, such as borde-left fills a quarter of the circle so that the fill area can be adjusted.
jsbin.com/zaxegowega/edit?html,css,output

Answer 1

You can use svg
codepen