Create an Animated Loading Spinner Using CSS Keyframes

A loading spinner is a ring with one colored segment that turns without stopping, so the user can see that the page is still working. This challenge builds one from a single element: a border makes the ring, one border color makes the segment, and a keyframe animation makes it turn.

The requirements

• Build a circular loading spinner with CSS only.
• Make it rotate continuously with a keyframe animation.
• Keep the rotation smooth and endless.
• Center the spinner on the page, both horizontally and vertically.
• Keep its proportions on screens of different sizes.

The solution

``