Заказать эффект

Интерфейсfx/18

AW-Flow — Preloader — Minimal

Тонкая полоса загрузки с процентами. Исчезает сама, когда страница полностью загрузилась.

Запуск
на весь сайт
Параметров
6
Телефоны
как на десктопе
Код
на весь сайт
весь сайт

Готовый код

Это тот же код, что сейчас работает в превью: значения подставлены из конструктора, внешние библиотеки не нужны.

для всего сайта2,8 КБ · HTML + CSS + JS
<!-- AW-Flow — Preloader — Minimal · код для всего сайта, префикс классов: awf-preloader-minimal -->
<style>
.awf-preloader-minimal {
  --awf-bg: #ffffff;
  --awf-accent: #7c5cff;
  --awf-bar-width: 180px;
  --awf-fade: 600ms;
}
.awf-preloader-minimal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--awf-bg);
  color: var(--awf-accent);
  transition: opacity var(--awf-fade) ease, visibility 0s linear var(--awf-fade);
}
.awf-preloader-minimal.awf-done { opacity: 0; visibility: hidden; }
.awf-preloader-minimal-bar {
  position: relative;
  width: var(--awf-bar-width);
  max-width: 70vw;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
}
.awf-preloader-minimal-bar::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0.18; }
.awf-preloader-minimal-bar i {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s ease;
}
.awf-preloader-minimal-num { font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; }
/* уважение к настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .awf-preloader-minimal, .awf-preloader-minimal-bar i { transition: none; }
}
</style>
<script>
(function () {
  var CLS = 'awf-preloader-minimal';
  var MIN = 900;      // минимальное время показа, мс
  var FADE = 600;        // исчезновение, мс
  var start = Date.now(), p = 0, done = false;
  var pl = document.createElement('div');
  pl.className = CLS;
  pl.setAttribute('aria-hidden', 'true');
  pl.innerHTML = '<div class="' + CLS + '-bar"><i></i></div>' + '<div class="' + CLS + '-num">0%</div>';
  document.documentElement.appendChild(pl);
  var bar = pl.querySelector('i'), num = pl.querySelector('.' + CLS + '-num');
  function draw() {
    bar.style.transform = 'scaleX(' + p + ')';
    if (num) num.textContent = Math.round(p * 100) + '%';
  }
  // пока страница грузится — полоса плавно приближается к 90%
  var timer = setInterval(function () { if (p < 0.9) { p += (0.9 - p) * 0.06; draw(); } }, 80);
  function finish() {
    if (done) return;
    done = true;
    clearInterval(timer);
    p = 1;
    draw();
    setTimeout(function () {
      pl.classList.add('awf-done');
      setTimeout(function () { pl.remove(); }, FADE + 50);
    }, Math.max(0, MIN - (Date.now() - start)) + 250);
  }
  if (document.readyState === 'complete') finish();
  else window.addEventListener('load', finish);
  setTimeout(finish, 10000); // страховка, если какой-то ресурс завис
})();
</script>

Вставляется один раз — в код всего сайта.

Как подключить в Tilda

Этот эффект действует на весь сайт, поэтому код вставляется не в блок, а в настройки сайта.

  1. Откройте вставку кода. «Настройки сайта» → «Вставка кода» → поле «HTML-код для вставки внутрь head».
  2. Вставьте код целиком и сохраните. Код добавляется один раз и работает на всех страницах сайта.
  3. Переопубликуйте все страницы. Без этого код не попадёт на уже опубликованные страницы.
  4. Нужно только на одной странице? Тогда вставьте код в «Настройки страницы» → «Дополнительно» → «HTML-код для вставки внутрь head» и опубликуйте эту страницу.
  5. Хотите поменять вид? Настройте эффект здесь заново и замените старый код новым — цвета, тексты и время уже вшиты в код.
  6. Как он работает. Экран загрузки появляется сразу при открытии страницы и сам скрывается после полной загрузки (событие window load), но не раньше минимального времени показа.
Ещё в разделе «Интерфейс»Весь каталог