#preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
background: #D3D3FF;
background: radial-gradient(circle, rgba(211, 211, 255, 1) 0%, rgba(156, 156, 255, 1) 51%, rgba(211, 211, 255, 1) 100%);      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    
    .loader {
  width: 100px;
  aspect-ratio: 1;
  padding: 10px;
  box-sizing: border-box;
  display: grid;
  background: #fff;
  filter: blur(5px) contrast(10) hue-rotate(180deg);
  mix-blend-mode: darken;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  margin: 30px 0;
  border-radius: 100px;
  background: #000;
  animation: l4 2s infinite linear;
}
.loader:after {
  --s:-1;
}
@keyframes l4{
  100% {transform: rotate(calc(var(--s,1)*1turn))}
}
    /* Скрываем после загрузки */
    #preloader.hidden {
      opacity: 0;
      visibility: hidden;
    }