<!-- Разработано GSP Development -->
<style>
:root {
  /* Настройки цветов прелоадера */
  --preloader-bg: #6f00ff;       /* Фиолетовый фон */
  --preloader-accent: #ffffff;    /* Цвет спиннера */
  --preloader-text: #ffffff;      /* Основной текст */
  --preloader-muted: rgba(255,255,255,.65); /* Проценты */
}

.css-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--preloader-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity .65s ease, visibility .65s ease;
}

.css-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.css-preloader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  font-family: inherit;
  text-align: center;
}

.css-preloader__spinner {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 90deg,
      var(--preloader-accent) 360deg
    );
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  animation: cssPreloaderSpin .85s linear infinite;
}

.css-preloader__text {
  font-size: 18px;
  font-weight: 700;
  color: var(--preloader-text);
}

.css-preloader__percent {
  font-size: 14px;
  font-weight: 600;
  color: var(--preloader-muted);
  letter-spacing: .08em;
}

@keyframes cssPreloaderSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .css-preloader__spinner { animation: none; }
  .css-preloader { transition: none; }
}
</style>

<script>
(function() {
  const MIN_SHOW_TIME = 900;
  const MAX_WAIT_TIME = 5000;
  const startTime = Date.now();
  let current = 0;
  let target = 0;

  // Создаём HTML прелоадера динамически
  const preloader = document.createElement("div");
  preloader.className = "css-preloader";
  preloader.innerHTML = `
    <div class="css-preloader__content">
      <div class="css-preloader__spinner"></div>
      <div class="css-preloader__text">Загружаем сайт</div>
      <div class="css-preloader__percent" id="cssPreloaderPercent">0%</div>
    </div>
  `;
  document.body.appendChild(preloader);

  const percent = document.getElementById("cssPreloaderPercent");

  function setPercent(value) {
    current = value;
    percent.textContent = Math.round(current) + "%";
  }

  function animatePercent() {
    current += (target - current) * 0.08;
    if(current < 99) percent.textContent = Math.round(current) + "%";
    requestAnimationFrame(animatePercent);
  }

  function fakeProgress() {
    if(target < 30) target += 1.8;
    else if(target < 65) target += 1.1;
    else if(target < 88) target += 0.45;
    else if(target < 96) target += 0.12;
    target = Math.min(target, 96);
    if(!preloader.classList.contains("is-hidden")) setTimeout(fakeProgress, 80);
  }

  function hidePreloader() {
    const elapsed = Date.now() - startTime;
    const delay = Math.max(0, MIN_SHOW_TIME - elapsed);
    setTimeout(() => {
      target = 100;
      percent.textContent = "100%";
      setTimeout(() => {
        preloader.classList.add("is-hidden");
        setTimeout(() => { preloader.remove(); }, 800);
      }, 250);
    }, delay);
  }

  animatePercent();
  fakeProgress();

  window.addEventListener("load", hidePreloader);
  setTimeout(hidePreloader, MAX_WAIT_TIME);
})();
</script>

<div class="css-preloader__text">Загружаем сайт</div>