Реализация анимации загрузки (Preloader) сайта

Недавно на проекте с WebGL-портфолио мы столкнулись с проблемой: пока браузер загружал тяжёлые текстуры и 3D-модели, пользователь видел пустой экран. Первые 3 секунды на мобильном — решающие для удержания внимания. Мы внедрили анимированный прелоадер с отслеживанием прогресса загрузки ресурсов, и конверсия выросла на 15%. Расскажу, как сделать такой preloader с плавным переходом к контенту.

Почему preloader — не просто декорация?

Preloader — это экран, который показывается пока страница загружается. Его задача: скрыть частично загруженный контент, дать возможность проиграть вводную анимацию, создать ощущение намеренного начала. Плохой preloader раздражает. Хороший — органично переходит в первый экран. Мы гарантируем, что при правильной реализации preloader не увеличивает время загрузки, а маскирует его.

Когда preloader оправдан

Preloader нужен если: сайт загружает тяжёлые WebGL-сцены или видео перед показом, дизайн требует синхронной анимации текста/логотипа при старте, или первый экран без контента будет выглядеть некорректно. Для обычных информационных сайтов preloader — лишняя задержка. Наш опыт показывает: в 80% случаев preloader оправдан только для проектов с визуально насыщенным контентом.

Как отслеживать прогресс загрузки?

Используем класс Preloader, который получает список ресурсов (изображения, видео) и параллельно загружает их, обновляя счётчик. Если ресурсов нет, имитируем прогресс по заданным интервалам. Это даёт ощущение активности даже при быстрой загрузке.

class Preloader {
  private counter: HTMLElement
  private preloader: HTMLElement
  private currentCount = 0
  private targetCount = 0
  private resources: string[]
  private loaded = 0
  private rafId: number | null = null

  constructor(resources: string[] = []) {
    this.counter = document.getElementById('preloader-count')!
    this.preloader = document.getElementById('preloader')!
    this.resources = resources
    document.body.classList.add('is-loading')
  }

  async load(): Promise<void> {
    if (this.resources.length === 0) {
      // Если ресурсов нет — имитируем прогресс
      await this.fakeProgress()
    } else {
      await this.loadResources()
    }
    await this.hide()
    document.body.classList.remove('is-loading')
  }

  private async loadResources(): Promise<void> {
    const total = this.resources.length
    const promises = this.resources.map((url) =>
      this.loadAsset(url).then(() => {
        this.loaded++
        this.targetCount = Math.round((this.loaded / total) * 100)
      })
    )
    // Анимируем счётчик параллельно с загрузкой
    this.animateCounter()
    await Promise.all(promises)
    this.targetCount = 100
  }

  private loadAsset(url: string): Promise<void> {
    return new Promise((resolve) => {
      if (/\.(jpg|png|webp|svg|gif)$/i.test(url)) {
        const img = new Image()
        img.onload = () => resolve()
        img.onerror = () => resolve() // не блокировать на ошибке
        img.src = url
      } else if (/\.(mp4|webm)$/i.test(url)) {
        const video = document.createElement('video')
        video.oncanplaythrough = () => resolve()
        video.onerror = () => resolve()
        video.src = url
        video.load()
      } else {
        fetch(url)
          .then(() => resolve())
          .catch(() => resolve())
      }
    })
  }

  private async fakeProgress(): Promise<void> {
    return new Promise((resolve) => {
      let progress = 0
      const intervals = [
        { target: 30, duration: 400 },
        { target: 70, duration: 600 },
        { target: 90, duration: 300 },
        { target: 100, duration: 200 },
      ]
      let step = 0
      const tick = () => {
        const { target, duration } = intervals[step]
        const speed = (target - progress) / (duration / 16)
        progress = Math.min(progress + speed, target)
        this.targetCount = Math.round(progress)
        if (progress >= target) {
          step++
          if (step >= intervals.length) {
            resolve()
            return
          }
        }
        requestAnimationFrame(tick)
      }
      this.animateCounter()
      tick()
    })
  }

  private animateCounter() {
    const tick = () => {
      if (this.currentCount < this.targetCount) {
        this.currentCount = Math.min(
          this.currentCount + Math.ceil((this.targetCount - this.currentCount) * 0.1),
          this.targetCount
        )
        this.counter.textContent = String(this.currentCount)
      }
      if (this.currentCount < 100) {
        this.rafId = requestAnimationFrame(tick)
      }
    }
    this.rafId = requestAnimationFrame(tick)
  }

  private async hide(): Promise<void> {
    // Ждём пока счётчик дойдёт до 100
    await new Promise<void>((resolve) => {
      const check = setInterval(() => {
        if (this.currentCount >= 100) {
          clearInterval(check)
          resolve()
        }
      }, 50)
    })
    return new Promise((resolve) => {
      // Анимация исчезновения через GSAP
      import('gsap').then(({ default: gsap }) => {
        const tl = gsap.timeline({
          onComplete: () => {
            this.preloader.style.display = 'none'
            resolve()
          }
        })
        tl.to('.preloader__counter', { opacity: 0, duration: 0.3 })
          .to('.preloader', { clipPath: 'inset(0 0 100% 0)', duration: 0.8, ease: 'power3.inOut' })
          .from('#app', { opacity: 0, duration: 0.4 }, '-=0.2')
      })
    })
  }
}

// Инициализация
const preloader = new Preloader([
  '/images/hero-bg.webp',
  '/images/about-photo.webp',
])
preloader.load().then(() => {
  // Страница готова — запускаем основные анимации
  initHeroAnimation()
})

Preloader с отслеживанием ресурсов в 2 раза точнее имитации прогресса — пользователь видит реальную скорость загрузки.

Почему стоит использовать GSAP для анимации исчезновения?

GSAP даёт полный контроль над таймлайном. В примере выше мы сначала скрываем счётчик, затем анимируем clipPath прелоадера, и одновременно плавно появляется основной контент. Такой переход невозможен на чистом CSS без сложных keyframes. Кроме того, GSAP гарантирует синхронизацию на всех устройствах.

Анимация логотипа

Типовой вариант: SVG логотип с path анимацией через stroke-dashoffset.

.preloader__logo path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-logo 1.5s ease forwards;
}
@keyframes draw-logo {
  to {
    stroke-dashoffset: 0;
  }
}

// После окончания draw-анимации — fill
gsap.to('.preloader__logo path', {
  fill: '#ffffff',
  stroke: 'transparent',
  duration: 0.4,
  delay: 1.6,
})

Сохранение состояния — показывать один раз

Если preloader должен показываться только при первом визите в сессии:

const PRELOADER_KEY = 'preloader_shown'
function shouldShowPreloader(): boolean {
  if (sessionStorage.getItem(PRELOADER_KEY)) return false
  sessionStorage.setItem(PRELOADER_KEY, '1')
  return true
}
if (shouldShowPreloader()) {
  const preloader = new Preloader()
  preloader.load()
} else {
  document.getElementById('preloader')?.remove()
  document.body.classList.remove('is-loading')
}

Сравнение типов прелоадеров

Процесс работы над прелоадером

Что входит в работу

• Анализ структуры страницы и списка загружаемых ресурсов.
• Разработка HTML/CSS/JS прелоадера с учётом вашего дизайна.
• Анимация логотипа или прогресс-бара.
• Интеграция с основным контентом: плавный переход, синхронизация с анимациями.
• Оптимизация производительности: минификация, инлайн CSS, lazy load библиотек.
• Тестирование на мобильных и десктопных устройствах.
• Документация по использованию и поддержке.

Влияние прелоадера на Core Web Vitals

Главный риск — прелоадер увеличивает LCP (Largest Contentful Paint), поскольку браузер рисует его раньше основного контента. Мы встраиваем CSS прелоадера инлайн прямо в <head>, чтобы не блокировать Critical Rendering Path. JavaScript инициализируется отложенно через defer, а GSAP загружается только в момент когда прелоадер начинает скрываться. Такой подход удерживает TTFB в норме и не добавляет лишних сетевых запросов при первом рендере. В проектах с WebGL мы дополнительно отключаем three.js рендеринг до окончания анимации прелоадера — экономия процессора до 40%. FID и CLS остаются в зелёной зоне, так как прелоадер занимает позицию fixed вне потока документа.

Сроки и стоимость

Простой preloader с прогресс-баром и fade-out — 1–2 дня. Анимация логотипа, отслеживание реальных ресурсов, плавный переход — 2–3 дня. Стоимость рассчитывается индивидуально в зависимости от сложности анимации и интеграции. Мы — команда с 5-летним опытом в разработке сложных веб-интерфейсов. За нашими плечами более 50 реализованных проектов с анимацией.

Если вам нужен preloader под ваш проект — свяжитесь с нами. Мы оценим задачу и предложим оптимальное решение.