Create Page Loading Spinners using CSS

In this tutorial, you will learn how to create different CSS loading spinners, as shown below.

HTML

<!-- Classic Spinner -->
<div class="spinner"></div>

<!-- Bouncing Dots Spinner -->
<div class="spinner-dots">
 <div class="dot"></div>
 <div class="dot"></div>
 <div class="dot"></div>
</div>

<!-- Pulse Effect Spinner -->
<div class="spinner-pulse"></div>

CSS

/***** Classic Spinner *****/
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3; /* Light gray border */
  border-top: 5px solid #3498db; /* Blue border for spin effect */
  border-radius: 50%; /* Makes it circular */
  animation: spin 0.8s linear infinite; /* Infinite spinning animation */
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/***** Bouncing Dots Spinner *****/
.spinner-dots {
  display: flex;
  gap: 8px; /* Space between the dots */
  justify-content: center;
  align-items: center;
}
.dot {
  width: 12px;
  height: 12px;
  background: #3498db; /* Blue color for the dots */
  border-radius: 50%; /* Makes each dot circular */
  animation: bounce 0.5s ease-in-out infinite; /* Bouncing animation */
}
.dot:nth-child(2) {
  animation-delay: 0.1s; /* Slight delay for the second dot */
}
.dot:nth-child(3) {
  animation-delay: 0.2s; /* Slight delay for the third dot */
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0); /* Dot at rest */
  }
  50% {
    transform: translateY(-10px); /* Dot moves upward */
  }
}

/***** Pulse Effect Spinner *****/
.spinner-pulse {
  width: 50px;
  height: 50px;
  background: #3498db; /* Blue color for the pulse */
  border-radius: 50%; /* Makes it circular */
  animation: pulse 0.8s ease-in-out infinite; /* Infinite pulse animation */
}
@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.5; /* Slightly transparent and smaller */
  }
  100% {
    transform: scale(1.2);
    opacity: 0; /* Fully transparent and larger */
 }
}