Модификации

Как сделать анимированный прелоадер Tilda

2025-11-04 12:02 Прелоадер

Инструкция

  1. Перейдите в «Настройки сайта» → «Ещё» → найдите пункт «HTML‑код для вставки внутрь HEAD» и нажмите кнопку «Редактировать код».
  2. Скопируйте и вставьте туда приведённый ниже код прелоадера.
  3. Сохраните изменения и опубликуйте сайт.
Как кастомизировать:
  • Цвет: в блоке <defs> замените значения stop-color на нужные вам в формате rgba (R, G, B, A).
  • Скорость анимации: во всех тегах <animate> измените параметр dur="1000ms" на желаемое значение (например, 500ms — быстрее, 2000ms — медленнее).
<!-- Скрипт для создания анимированного прелоадера на Tilda с сайта bulgkate.ru -->
<div class="uc-preloader">
  <svg viewBox="0 0 64 64" width="64" height="64">
    <defs>
      <linearGradient id="svg-gradient" gradientTransform="rotate(316)">
        <stop offset="0%" stop-color="rgba(0,160,243,1)" />
        <stop offset="50%" stop-color="rgba(59,221,201,1)" />
        <stop offset="100%" stop-color="rgba(86,60,202,1)" />
      </linearGradient>
    </defs>
    <g fill="url(#svg-gradient)" stroke="none">
      <circle cx="24" cy="0" transform="translate(32,32)">
        <animate attributeName="r" dur="1000ms" values="8;7;6;5;4;3;2;1;8" repeatCount="indefinite" />
      </circle>
      <circle cx="16.9705" cy="16.9705" transform="translate(32,32)">
        <animate attributeName="r" dur="1000ms" values="1;8;7;6;5;4;3;2;1" repeatCount="indefinite" />
      </circle>
      <circle cx="0" cy="24" transform="translate(32,32)">
        <animate attributeName="r" dur="1000ms" values="2;1;8;7;6;5;4;3;2" repeatCount="indefinite" />
      </circle>
      <circle cx="-16.9705" cy="16.9705" transform="translate(32,32)">
        <animate attributeName="r" dur="1000ms" values="3;2;1;8;7;6;5;4;3" repeatCount="indefinite" />
      </circle>
      <circle cx="-24" cy="0" transform="translate(32,32)">
        <animate attributeName="r" dur="1000ms" values="4;3;2;1;8;7;6;5;4" repeatCount="indefinite" />
      </circle>
      <circle cx="-16.9705" cy="-16.9705" transform="translate(32,32)">
        <animate attributeName="r" dur="1000ms" values="5;4;3;2;1;8;7;6;5" repeatCount="indefinite" />
      </circle>
      <circle cx="0" cy="-24" transform="translate(32,32)">
        <animate attributeName="r" dur="1000ms" values="6;5;4;3;2;1;8;7;6" repeatCount="indefinite" />
      </circle>
      <circle cx="16.9705" cy="-16.9705" transform="translate(32,32)">
        <animate attributeName="r" dur="1000ms" values="7;6;5;4;3;2;1;8;7" repeatCount="indefinite" />
      </circle>
    </g>
  </svg>
</div>

<style>
.uc-preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100005;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.85); /* белый полупрозрачный */
  transition: opacity 0.75s ease-in-out 0.35s;
}

.hide-preloader {
  opacity: 0;
  pointer-events: none;
}
</style>

<script>
(function () {
  const minVisibleTime = 2000;
  const body = document.body;
  const preloader = document.querySelector('.uc-preloader');
  const start = Date.now();

  if (preloader) {
    body.style.overflow = "hidden";

    const hide = () => {
      const elapsed = Date.now() - start;
      setTimeout(() => {
        preloader.classList.add('hide-preloader');
        body.style.overflow = "";
        window.dispatchEvent(new Event('resize'));
      }, Math.max(0, minVisibleTime - elapsed));
    };

    document.addEventListener("DOMContentLoaded", hide);
    window.addEventListener("load", hide);
  }
})();
</script>