.loader-wrapper {
    display: none !important;
    position: fixed; /* or absolute depending on your layout */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* dark background with low opacity */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* make sure it appears above other elements */
}

.loader {
  height: 4px;
  width: 130px;
  --c: no-repeat linear-gradient(#6100ee 0 0);
  background: var(--c), var(--c), #d7b8fc;
  background-size: 60% 100%;
  animation: l16 3s infinite;
}

@keyframes l16 {
  0% {
    background-position: -150% 0, -150% 0;
  }

  66% {
    background-position: 250% 0, -150% 0;
  }

  100% {
    background-position: 250% 0, 250% 0;
  }
}
/* HTML: <div class="loader"></div> */
/*.loader {
  color: #401774;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
  transform: translateX(-38px);
  animation: l21 .5s infinite alternate linear;
}

@keyframes l21 {
  50% {
    box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px
  }

  100% {
    box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px
  }
}
*/