CSS-анимация загрузки: простой спиннер без JavaScript

Анимации загрузки — это визуальные индикаторы, которые показывают пользователю, что система обрабатывает действие. Один из самых распространённых вариантов — спиннер, вращающийся круг.

Это статья из цикла заметок по CSS анимации и эффектам.

Как это работает

Мы создадим круг, который будет постоянно вращаться. Всё делается с помощью чистого CSS: один HTML-элемент и анимация на transform: rotate(...).

Пример, того как это выглядит:

Вот пример на чистом CSS / HTML

Стили

Объяснение

  • border: создаём кольцо с одной тёмной частью, которая будет «вести» при вращении.
  • @keyframes spin: задаёт вращение от 0 до 360 градусов.
  • animation: делает вращение непрерывным (infinite) и равномерным (linear).

Как использовать

Такой спиннер можно показывать в следующих случаях:

  • пока загружается страница;
  • при отправке формы;
  • при подгрузке данных из API.

Расширение идеи

  • Добавить fade-in/fade-out при появлении и скрытии.
  • Заменить border на conic-gradient для более плавного вида (поддержка ограничена).
  • Изменять скорость вращения при наведении или клике.

Мало букафф? Читайте есчо !

Поворот иконки при наведении

Апрель 22, 2025 г.

Небольшая анимация при наведении — отличный способ добавить интерактивности и "отзывчивости" вашему интерфейсу. Один из самых простых и эффектных вариантов — поворот иконки. Это статья из цикла заметок по CSS анимации и эффектам. Где это типично ...

Читать

Плавающее движение вверх-вниз с помощью CSS

Май 1, 2025 г.

Этот эффект создаёт иллюзию, будто элемент "плавает" в воздухе — мягко покачиваясь вверх и вниз. Он отлично подходит для украшений, иконок, стрелок прокрутки или просто акцентов, которые должны привлекать внимание, но не быть слишком навязчивыми. Это ...

Читать

Слайд-ин: элемент "въезжает" с края

Апрель 29, 2025 г.

Этот эффект часто используют для появления блоков на странице при загрузке или при прокрутке — например, когда карточка товара "въезжает" с левой или правой стороны. Он создаёт ощущение динамики и привлекает внимание. Это статья из цикла заметок по ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать
 

Комментарии к «CSS-анимация загрузки: простой спиннер без JavaScript»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: