Je známo, že pokud zobrazujete nějaký progressbar (zobrazení průběhu), uživatelům se zdá proces rychlejší, pokud se pozadí progressbaru pohybuje směrem doleva.

Jak ale udělat animované pozadí bez toho, abyste složitě připravovali animované obrázky?

Stačí vám k tomu statický obrázek nebo CSS gradient (přechod) a CSS3 animace.

Pro obrázek:

@keyframes progressBackground {
    0%   {background-position: 16px 0;}
    100% {background-position:  0   0;}
}

.progress {
    /* nastavení pozadí */
    background-image: url("progress.png");
    background-position: 16px 0;
    background-repeat: repeat;
    background-size: 16px 1px;

    /* nastavení animace */
    animation-name: progressBackground;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

Pro šrafovaný gradient:

@keyframes progressBackground {
    0%   {background-position: 16px 0;}
    100% {background-position:  0   0;}
}

.progress {
    /* nastavení pozadí */
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);

    background-position: 16px 0;
    background-repeat: repeat;
    background-size: 16px 1px;

    /* nastavení animace */
    animation-name: progressBackground;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

Musíte splnit několik pravidel, aby animace probíhala správně:

1. šířka obrázku musí být stejná u background-size a background-position; díky tomu se v jedné iteraci posune obrázek o svoji šířku doleva.
2. výška obrázku by měla být 1 pixel nebo odpovídat výšce progressbaru (nejlépe 100%); u gradientu musí být stejná jako šířka, aby se správně skládalo pozadí otočené o 45°.
3. animace musí probíhat lineárně, aby přechod ze 100% na nulu byl plynulý – jelikož výchozí hodnota je ease, musíte ji nastavit na linear.
4. počet iterací nastavte na nekonečno, aby probíhala nepřetržitě.

Pro posun obrázku doprava stačí prohodit hodnoty u 0% a 100%, pro pohyb shora dolu (nebo opačně) je potřeba měnit druhou hodnotu u background-size a background-position.

Pokud chcete svislý nebo vodorovný gradient, stačí nahradit hodnotu -45deg (315°) za 0deg (pro svislý pohyb) nebo 90deg (vodorovný pohyb). Pro sklon na druhou stranu použijte hodnotu 45deg (45°). Prefixované definice gradientu jsou určeny pouze pro starší prohlížeče; pokud vám stačí podporovat IE11 a nejnovější verze Webkit a Firefox, můžete ponechat pouze poslední definici s linear-gradient. Pokud ještě potřebujete podporovat i starší Android a iOS zařízení, stačí přidat -webkit-linear-gradient.

Poznámka: v závislosti na počtu animací na stránce a zatížení zařízení může animace občas zamrznout nebo poskočit, ale to by animovaný GIF nebo animace pomocí skriptu dělala také.

Že to skutečně funguje se můžete přesvědčit na demo stránce.