#preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: $accent-3;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
 
.spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: $accent-1;
    background: linear-gradient(currentColor 0 0) center/100% 4px,
             linear-gradient(currentColor 0 0) center/4px 100%,
             radial-gradient(farthest-side,#0000 calc(100% - 7px),currentColor calc(100% - 6px)),
             radial-gradient(circle 7px,currentColor 94%,#0000 0);
    background-repeat: no-repeat;
    animation: spinner-mu2ebf 1s infinite linear;
    position: relative;
   }
   
   .spinner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    transform: rotate(45deg);
   }
   
   @keyframes spinner-mu2ebf {
    to {
     transform: rotate(.5turn);
    }
   }