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.
Recommended Links:
