Round Loading Indicator

In this HTML snippet you can see that we are using a span that has a special data-value attribute. This allows us to store the current value on the HTML element depending on how much loading has occured. There is also a SVG element here that has a stroke yellow and what is more important though is the stroke width of 20, this will set how large the animated portion of the SVG will be displayed.

In this CSS the broder-radius

You will notice that in the below Codepen there is some JavaScript, this is just for updating the text to say true or false.