CSS animace průběhu načítání
Jak využitím CSS transition
a špetky JavaScriptu vytvořit animované znázornění průběhu načítání, jako je třeba na YouTube.
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ý.
Jak to funguje?
Postup je docela jednoduchý.
- Nejprve se vytvoří taková atrapa značky
<progress>
, tj. obalový<div>
a vnořený<div>
pro znázornění postupu. - Tento element se spolu s dobou trvání přechodu předá funkci
prubeh
. - Funkce potom jen do
postup.style.transition
nastaví příslušně dlouhou animaci, čímž animování započne. - 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).
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.
Komentáře