.spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    margin: 20px auto;
}

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




/* HTML: <div class="loader"></div> */
.loader2 {
  width: 50px;
  height: 50px;
  --b: 8px; 
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%,#3b3b3b) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
      mask-composite: intersect;
  animation: l4 1s infinite steps(10);
  margin: 20px auto;
  z-index: 9999; /* Ensure it shows on all layers */
  position: relative; /* Required for z-index to work */
  box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

@keyframes l4 {
  to { transform: rotate(1turn); }
}




.loader {
  display: block;
  position: relative;
  height: 10px;
  width: 70px;
  background-image: 
    linear-gradient(#3b3b3b 10px, transparent 0), 
    linear-gradient(#3b3b3b 10px, transparent 0), 
    linear-gradient(#3b3b3b 10px, transparent 0), 
    linear-gradient(#3b3b3b 10px, transparent 0);
  background-repeat: no-repeat;
  background-size: 10px auto;
  background-position: 0 0, 20px 0, 40px 0, 60px 0;
  animation: pgfill 1s linear infinite;
  margin: 20px auto;
  z-index: 9999; /* Ensure it shows on all layers */
  box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

@keyframes pgfill {
  0% { background-image: linear-gradient(#3b3b3b 20px, transparent 0), linear-gradient(#3b3b3b 20px, transparent 0), linear-gradient(#3b3b3b 20px, transparent 0), linear-gradient(#3b3b3b 20px, transparent 0); }
  25% { background-image: linear-gradient(#6c757d 20px, transparent 0), linear-gradient(#3b3b3b 20px, transparent 0), linear-gradient(#3b3b3b 20px, transparent 0), linear-gradient(#3b3b3b 20px, transparent 0); }
  50% { background-image: linear-gradient(#adb5bd 20px, transparent 0), linear-gradient(#6c757d 20px, transparent 0), linear-gradient(#3b3b3b 20px, transparent 0), linear-gradient(#3b3b3b 20px, transparent 0); }
  75% { background-image: linear-gradient(#dee2e6 20px, transparent 0), linear-gradient(#adb5bd 20px, transparent 0), linear-gradient(#6c757d 20px, transparent 0), linear-gradient(#3b3b3b 20px, transparent 0); }
  100% { background-image: linear-gradient(#f8f9fa 20px, transparent 0), linear-gradient(#dee2e6 20px, transparent 0), linear-gradient(#adb5bd 20px, transparent 0), linear-gradient(#6c757d 20px, transparent 0); }
}