So with the HTML all we’ve done is nested as many divs with the ‘circle’ class as we want rings to appear, and added a final ‘inner’ div in the centre to give a bit of space. For the CSS, a margin has been added to space out the circles a little and the .inner class has a width and height given to it.

The the width and height of the .circle class has also disappeared. This is so they are able to scale themselves to fit inside each other. However, as you can see now the circles are no longer circles. To fix this, we need to make the container div the same width as the height and so therefore we need to figure out what value the height actually is.

There are a number of ways to figure out the height, from taking a screenshot of it and working it out in Photoshop to using Google Chrome’s developer tools to simply adjusting the width value until it looks about right. There is also a way to work it out just by the values we’ve already put in.

So all we’re saying here is simply at the very beginning, the element will be rotated by 0 degrees and at the very end, it will be rotated by 360 degrees. And to specify which element we want to rotate, we add this to the .circle class:

CSS:

.circle{
animation: mySpinAnimation 20s infinite;/*specify the name of the @keyframes you want to use, how long you want it to last (seconds) and 'infinte' to make it loop*/
animation-timing-function: linear;/*helps it loop seamlessly*/