.loader {
  position: relative;
}

.loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* HTML: <div class="loader"></div> */
.loader-icon {
  position: absolute;
  width: 60px;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  margin: auto;
  --g1:conic-gradient(from  90deg at 3px  3px ,#7367f0 90deg,#7367f0 0);
  --g2:conic-gradient(from -90deg at 22px 22px,#7367f0 90deg,#7367f0 0);
  background:var(--g1),var(--g1),var(--g1), var(--g2),var(--g2),var(--g2);
  background-size: 25px 25px;
  background-repeat: no-repeat;
  animation: l7 0.9s infinite;
  z-index: 9999;
}
@keyframes l7 {
  0%   {background-position:0    0   ,0 100%,100% 100% }
  25%  {background-position:100% 0   ,0 100%,100% 100% }
  50%  {background-position:100% 0   ,0 0   ,100% 100% }
  75%  {background-position:100% 0   ,0 0   ,0    100% }
  100% {background-position:100% 100%,0 0   ,0    100% }
}