css loading

/* CSS Loading Animation Example */

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey border */
  border-top: 16px solid #3498db; /* Blue border on top */
  border-radius: 50%; /* Makes it a circle */
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite; /* Apply the spin animation */
}

/* Explanation:
- The @keyframes rule defines the animation sequence.
- The .loader class styles a circular loader with a spinning animation.
- The animation property applies the spin keyframes to the loader element, making it rotate infinitely.
*/