Loading Spinner устарел? Делаем modern Skeleton Loader на Vanilla JavaScript

Пустой белый экран.
Бесконечный spinner посреди страницы.
И пользователь, который уже думает закрыть вкладку.

Именно поэтому крупные сервисы вроде YouTube, TikTok и Netflix давно перешли на skeleton loaders - «скелетоны», которые показывают структуру контента ещё до загрузки данных.

Хорошая новость: сделать такой loading UI можно буквально за несколько минут - даже без React и тяжёлых библиотек.

В этой статье создадим современный Skeleton Loader на чистом Vanilla JavaScript с shimmer-анимацией и адаптивным UI.

Что такое Skeleton Loader

Skeleton Loader - это placeholder-интерфейс, который имитирует будущий контент страницы.

Вместо обычного spinner пользователь сразу видит:

• карточки,

• блоки текста,

• изображения,

• структуру layout.

Это создаёт ощущение, что сайт работает быстрее, даже если данные ещё загружаются.

Именно поэтому skeleton UI используют:

• YouTube,

• Facebook,

• TikTok,

• LinkedIn,

• Netflix.

Почему skeleton loader лучше spinner

Обычный spinner не даёт никакой информации.
Пользователь просто смотрит на крутящийся круг.

Skeleton Loader работает иначе:

• интерфейс выглядит «живым»;

• уменьшается ощущение ожидания;

• UI кажется быстрее;

• пользователь понимает структуру страницы.

Это сильно улучшает UX.

Финальный результат

Мы сделаем:

• modern card skeleton;

• shimmer animation;

• responsive layout;

• динамическую генерацию карточек через JavaScript.

HTML-разметка

Создадим контейнер для карточек.

<div class="container" id="skeleton-container"></div>

CSS для Skeleton Loader

Теперь добавим стили и shimmer-анимацию.

body {
  background: #0f172a;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 40px;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.card {
  background: #1e293b;
  border-radius: 20px;
  padding: 20px;
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: #334155;
}

.skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150px;
  width: 100px;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.15),
    transparent
  );
  animation: shimmer 1.2s infinite;
}

.image {
  width: 100%;
  height: 180px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.title {
  height: 20px;
  width: 70%;
  border-radius: 8px;
  margin-bottom: 12px;
}

.text {
  height: 14px;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 8px;
}

.text.short {
  width: 60%;
}

@keyframes shimmer {
  100% {
    left: 100%;
  }
}

JavaScript: генерируем skeleton cards

Теперь создадим skeleton-карточки через Vanilla JS.

const container = document.getElementById("skeleton-container");

for (let i = 0; i < 6; i++) {
  const card = document.createElement("div");

  card.classList.add("card");

  card.innerHTML = `
    <div class="image skeleton"></div>
    <div class="title skeleton"></div>
    <div class="text skeleton"></div>
    <div class="text skeleton"></div>
    <div class="text short skeleton"></div>
  `;

  container.appendChild(card);
}

После запуска ты получишь современный loading UI с плавной анимацией.

Как заменить skeleton на настоящий контент

Обычно skeleton показывается во время загрузки API.

Например:

setTimeout(() => {
  container.innerHTML = "<h1 style='color:white'>Контент загружен</h1>";
}, 3000);

Через 3 секунды skeleton исчезнет и появится настоящий контент.

Как улучшить этот skeleton loader

Вот несколько идей:

• добавить fade animation;

• сделать skeleton для таблиц;

• создать YouTube-style cards;

• добавить dark/light mode;

• сделать reusable utility class.

Почему такой UI сейчас обязателен

Пользователи привыкли к быстрым интерфейсам.

Если сайт показывает пустой экран - это уже выглядит устаревшим.
Особенно на фоне современных SaaS-приложений и AI-сервисов.

Skeleton loaders помогают:

• улучшить UX;

• уменьшить bounce rate;

• сделать интерфейс визуально быстрее;

• придать сайту premium-ощущение.

И именно поэтому этот паттерн используют почти все крупные tech-компании.