lightweight spinner loader HTML

<!--CSS CODE-->
<style>
body{
margin: 0;
  display: flex;
  justify-content: center;  
  align-items: center;      
  min-height: 100vh;        
  background-color: #ffffff;
}
.loader {
  /* Size of the spinner */
  width: 48px;
  height: 48px;
  
  /* Creates a light gray full circle ring */
  border: 5px solid #f3f3f3;
  
  /* Colors the top quarter blue to act as the indicator */
  border-top: 5px solid #3498db;
  
  /* Turns the square box into a perfect circle */
  border-radius: 50%;
  
  /* Infinite linear rotation loop lasting 1 second */
  animation: spin 1s linear infinite;
}

/* Define the continuous 360-degree rotation animation */
@keyframes spin {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}
</style>

<!--HTML-->
<div class="loader"></div>