Как сделать анимацию загрузки css

Существует множество способов создания анимации загрузки на CSS, но одним из наиболее популярных является использование анимации вращения.

Для создания анимации вращения в CSS, нужно использовать следующий код:

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Здесь мы создали элемент с классом «loader», который задает размеры и стили для круговой фигуры. Далее мы определяем анимацию «spin» с помощью ключевого слова «@keyframes», которое указывает последовательность изменений свойств CSS во время анимации. В данном случае, мы задаем начальный угол поворота (0 градусов) и конечный угол (360 градусов) с помощью свойства transform: rotate(). Затем мы применяем анимацию «spin» к элементу с помощью свойства animation, где указываем название анимации, время выполнения и тип анимации (в данном случае, linear) и свойство infinite (бесконечно повторять анимацию).

Чтобы добавить более сложные анимации, можно использовать несколько ключевых кадров и свойства transition или transform для изменения свойств элемента со временем. Например, можно создать загрузочный экран с изменением цвета фона, изменением размера элементов или появлением эффектов.

.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #3498db;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

body.loading .loader {
  background-color: rgba(0, 0, 0, 0.2);
}

body.loading .inner {
  border-color: #f1c40f;
}

Здесь мы создали блок загрузки с помощью CSS Flexbox и использовали два отдельных блока для создания анимации. Внутренний элемент «inner» создает вращающийся круг вокруг своей оси и это создает эффект загрузки. Внешний элемент «loader» в центре прикрепляет внутренний элемент к середине блока, а во время загрузки добавляет фон и изменяет цвет рамки, создавая гармоничный дизайн.

Чтобы запустить анимацию при загрузке страницы, можно добавить класс «loading» к тегу «body». Создавайте отдельные элементы, чтобы добавлять значения и создавать интересные эффекты по времени.