Search⌘ K

Rotating Loading Spinner

Explore how to create a continuously rotating loading spinner using only CSS. Learn to style a circular element with distinct border colors and apply keyframe animations for smooth and infinite spinning to enhance user interfaces with subtle dynamic effects.

Problem description

Given an HTML page containing a <div class="spinner"></div> element, write CSS to:

  • Style the spinner as a 50×50 px circle with a 5 px solid border, using a contrasting color for the top border to create ...