CSS animace průběhu načítání

V AJAXových aplikacích se při vyvolání akce někdy hodí znázorňovat průběh. Pokud dokončení akce trvá déle, uživatel má visuální potvrzení, že se něco děje.

Od IE 10 je možné animaci vytvořit přes CSS vlastnost transition, která bude měnit šířku, což vytvoří kýžený efekt.

Také by šly použít přímo animace přes @animation, ale v tomto případě celkem stačí i tranisition a kód nemusí být zaprefixovaný.

Samostatná ukázka

Jak to funguje?

Postup je docela jednoduchý.

1. Nejprve se vytvoří taková atrapa značky <progress>, tj. obalový <div> a vnořený <div> pro znázornění postupu.
2. Tento element se spolu s dobou trvání přechodu předá funkci prubeh.
3. Funkce potom jen do postup.style.transition nastaví příslušně dlouhou animaci, čímž animování započne.
4. A nakonec se časovačem (setTimeout) provede vyčistění animace.

Progress-bar přes celou stránku

Chtěli-li bychom animaci znázorňovat nahoře přes celou šíři stránky, nejjednodušší je element .postup fixně naposicovat nahoru (fixně posicovaný element totiž v podstatě není ovlivňován ničím jiným na stránce).

Samostatná ukázka

Skutečný stav načítání

Výše uvedené ukázky nijak neznázorňují skutečný průběh načtení stránky, ale jen spouští animaci na pevně stanovenou dobu.

Vytvořit skutečnost odrážející progressbar je poměrně komplikované, jelikož u typické webové stránky se zpravidla po vyvolání akce nejprve neznámou a nejdelší dobu čeká na odpověď serveru. Když dorazí, tak už se obsah většinou vykreslí bleskurychle.

Tudíž se není moc od čeho odrazit. Stahovat jednotlivé části stránky několika HTTP požadavky, aby reálně fungovalo zobrazování načítání, je většinou samoúčelné, jelikož to nejspíš prodlouží dobu načítání.

Zajímavé řešení může být vytvořit nekončený stav průběhu, kdy animace začne rychle, ale neustále se zpomaluje a zpomaluje.