How can I use keyframes to create a smooth loading spinner effect for an interactive UI component?

Ask any question about CSS here... and get an instant response.

Post this Question & Answer:

How can I use keyframes to create a smooth loading spinner effect for an interactive UI component?

Asked on Jan 09, 2026

Answer

To create a smooth loading spinner effect using keyframes in CSS, you can animate the rotation of an element continuously. This is achieved by defining keyframes that rotate the element from 0 to 360 degrees.

<!-- BEGIN COPY / PASTE -->
    <div class="spinner"></div>

    <style>
      .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        animation: spin 2s linear infinite;
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    </style>
    <!-- END COPY / PASTE -->

Additional Comment:

The spinner is created using a div with a border that simulates a circular shape.
The "border-top" color is different to create a visual effect of a spinning line.
The "animation" property applies the "spin" keyframes, rotating the element continuously.
"2s linear infinite" means the animation takes 2 seconds per cycle, runs smoothly, and repeats indefinitely.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I use keyframes to create a smooth loading spinner effect for an interactive UI component?

Asked on Jan 09, 2026

Answer

5,000+ Real Questions. Clear Answers.