.flexify {
    display: flex; justify-content: center; align-items: center; min-height: 95vh;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 40px;
  aspect-ratio: 1;
  color: #dbe916;
  background: conic-gradient(currentColor 0 270deg,#0000 0);
  border-radius: 50%;
  animation: l14-0 4s infinite linear;
}
.loader::before {
  content: "";
  display: block;
  height: 50%;
  width: 50%;
  border-top-left-radius: 100px;
  background: currentColor;
  animation: l14 0.5s infinite alternate;
}
@keyframes l14-0 {
    0%,24.99%  {transform: rotate(0deg)}
    25%,49.99% {transform: rotate(90deg)}
    50%,74.99% {transform: rotate(180deg)}
    75%,100%   {transform: rotate(270deg)}
}
@keyframes l14 {
    100%  {transform: translate(-10px,-10px)}
}

.charming {
    position: fixed; top:-100vh;left:0;width: 100%;height: 100vh;
    overflow-y: auto; z-index: 10;background-color: #f5f0f0;
}




/* HTML: <div class="loader"></div> */
.loader1 {
  width: 60px;
  aspect-ratio: 4;
  background: radial-gradient(circle closest-side,#000 90%,#0000) 0/calc(100%/3) 100% space;
  clip-path: inset(0 100% 0 0);
  animation: l1 1s steps(4) infinite;
}
@keyframes l1 {to{clip-path: inset(0 -34% 0 0)}}