Whilst working on a recent stacked slideshow I found a way of creating a rotating spinner around a central filled circle using conic-gradients, masked radial gradients and @keyframe animation.

I have taken this a step further to have just the rotating spinner with transparency.

To make it suitable for any size of spinner and color I have introduced CSS variables so that you can easily change the width, outside diameter, the start / end colors and speed of rotation.

The sizing can be in pixels and also vw so that it can made be responsive.

The demonstration uses vw sizing and the spinner will resize as the browser window is resized.

Finally there is a 'dot' at the head of the rotating spinner which is also controlled using the CSS variables. This finishes off the spinner and looks better that having a 'blunt' leading edge.