Анимированный фон загрузки на CSS
Рассмотрим принцип создания на CSS визуального эффекта движущегося фона, как на кнопке ниже. Так, чтобы анимированный фон задавался присвоением CSS-класса loading-bg
. Для создания эффекта задействуем псевдоэлемент :after
и CSS-анимацию свойства transform
с помощью CSS-функции translateX()
и правила @keyframes
.
Фон из бесшовной картинки
Внутри корневого элемента создаём псевдоэлемент :after
и задаём ему статический фон из повторяющейся бесшовной картинки с диагональными полосками. Затем добавляем зацикленную анимацию смещения фонового изображения.
.loading-bg::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -28px; // Ширина фоновой картинки throbber.png.
z-index: -1;
background: url('throbber.png') repeat 0 0;
animation: .4s linear infinite loading-bg;
}
Правило @keyframes
для смещения фона на ширину фонового изображения throbber.png.
@keyframes loading-bg {
from {
transform: translateX(0);
}
to {
// Сдвигаем на ширину фоновой картинки throbber.png.
transform: translateX(28px);
}
}
Чтобы движущийся фон не выходил за границы корневого элемента добавляем:
.loading-bg {
overflow: hidden;
}
Код рабочий, его можно использовать.
CSS-функция repeating-linear-gradient()
Вместо фоновой картинки в свойстве background можно использовать CSS-функцию repeating-linear-gradient()
.
background: repeating-linear-gradient(
-45deg,
#FFFFFF 1px,
#EEEEEE 2px,
#EEEEEE 11px,
#FFFFFF 12px,
#FFFFFF 20px
);
Этот вариант удобен тем, что для замены цвета или угла наклона диагональных полосок нет необходимости менять изображение в графическом редакторе и закачивать файл на сервер. Достаточно скорректировать CSS-код свойства background
.
Кросс-браузерная поддержка
Для поддержки старых браузеров необходимо дублировать правила repeating-linear-gradient
, @keyframes
и animation
со следующими префиксами:
-webkit-repeating-linear-gradient
-moz-repeating-linear-gradient
-o-repeating-linear-gradient
@-webkit-keyframes
@-moz-keyframes
@-o-keyframes
-webkit-animation
-moz-animation
-o-animation