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 the spinner effect.

• Define a @keyframes spin animation that rotates the element from 0deg to 360deg.

• Apply the spin animation to the spinner with a duration of 1s, linear timing, and infinite iteration.

Goal

Write CSS rules to animate the .spinner element so it continuously rotates in place.

Constraints

• Use only CSS (no JavaScript).

• Spinner width and height should be 50px.

• Border should be 5px solid #ccc with border-top: 5px solid #333.

• Border-radius should be 50%.

• Animation name should be spin.

• Animation duration should be 1s.

• Animation timing should be linear.

• Animation iteration count should be infinite.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.