Анимированный фон загрузки на 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
27 ноября 2020