O webu
CSS spinner

Pro znázornění průběhu načítání je možné použít od IE 10 animaci. Jak si nějakou připravit čistě v CSS pomocí animation.

Samostatná ukázka

Funguje to tak, že se element zakulatí vlastností border-radius. Na jednu stranu (např. border-bottom) se přidá rámeček.

A nekonečná animace tento rámeček bude otáčet přes transformaci: transform: rotate(360deg).

Pro transformaci i animaci je v prohlížečích s jádrem Webkit nutné použít CSS prefixy.

Starší prohlížeče

Pro starší prohlížeče (IE 9 a starší) by se obdobná animace musela dělat JavaScriptem nebo obrázkovým GIFem.

Načítání

Proč CSS animace

Animování pomocí CSS bývá nepatrně rychlejší než srovnatelné animace v JavaScriptu.

CSS animace může být i jednodušší na realisaci a úpravy vzhledu než tvorba GIFu.

Hotové CSS animace načítání