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 для более плавного вида (поддержка ограничена).
  • Изменять скорость вращения при наведении или клике.

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

Анимация нажатия: эффект нажатой кнопки

Май 2, 2025 г.

Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка "прижать" её визуально. Такой эффект достигается с помощью изменения масштаба (scale) и вертикального смещения (translateY). Это статья из цикла заметок по ...

Читать

Анимация: Поднятие элемента с тенью при наведении

Апрель 26, 2025 г.

Эта анимация создаёт эффект, будто элемент "приподнимается" над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)). Это статья из цикла заметок ...

Читать

Изменение цвета кнопки при наведении

Апрель 21, 2025 г.

Здесь мы разберем CSS анимацию - изменение цвета при наведении (:hover). Это статья из цикла заметок по CSS анимации и эффектам. Одним из самых простых и эффективных способов оживить интерфейс — сделать так, чтобы кнопка меняла цвет, когда ...

Читать

Анимация подчеркивания текста при наведении

Апрель 28, 2025 г.

Классический эффект: при наведении на ссылку или текст появляется анимированное подчеркивание. Вместо обычного text-decoration: underline, подчеркивание создаётся с помощью псевдоэлементов (::after или ::before) и плавно анимируется. Это выглядит современно ...

Читать
 

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

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



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