Как сделать loading animation без библиотек

Суть. CSS keyframes и skeleton screens.

Спиннер и точки без библиотек

Два классических индикатора загрузки на чистом CSS.

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(124,77,255,.25);
  border-top-color: #7c4dff;
  animation: spin .8s linear infinite;
}

.dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: #00d4ff;
  animation: bounce 1s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: .15s; }

Как сделать loading animation без библиотек — про баланс: интерфейс должен откликаться, но не съедать FPS и батарею. В статье есть живой пример; ниже — контекст, когда эффект оправдан.

Когда анимация уместна

• Обратная связь на действие: hover, focus, успех отправки формы.
• Смена контекста: открытие модалки, переход между шагами.
• Первый визит: короткий fade hero, не минутный ролик.

Не анимируйте всё подряд: 2–3 акцента на экран достаточно. Обязательно проверьте prefers-reduced-motion.

Типичные ошибки

Перегруз эффектами и библиотеками «на всякий случай»; отсутствие проверки на слабом интернете и старых телефонах; копирование чужого дизайна без адаптации под свою аудиторию; отсутствие явного CTA; ожидание, что «сайт сам продаст» без трафика и оффера.

Для коммерческих проектов отдельно болит размытое ТЗ и бесконечные правки без доплаты — лечится этапами и лимитом итераций.

Когда имеет смысл привлечь разработчика

Если нужен не шаблон, а связка дизайна, скорости, интеграций и сопровождения — проще обсудить задачу один раз, чем чинить конструктор полгода. Я беру лендинги, визитки и MVP под ключ; ориентиры по срокам и бюджету — на странице цен.

Читать дальше

• Визуально дороже без дизайнера — типографика и отступы
• Портфолио — живые кейсы
• Услуги — лендинг и визитка