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.
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.
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í
- CSS spinner
- Animace průběhu v odesílacím tlačítku
- Různé styly animací
- CSS Only Loading Spinners
- Progress.js – znázornění průběhu v horní části stránky
- 8 awesome pure CSS spinner / loader
- Single Element CSS Spinners
- Creating a Collection of CSS3 Animated Pre-loaders – jak animace načítání vytvořit
- SVG Loaders
- 16 CSS3 and jQuery Loading Animations Solutions
- Loading.io – nástroj pro vytvoření loadovacích animací v CSS/SVG/GIF
Související články
Různá šířka <input type=number> s min/max
Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.
Poskakování stránky kvůli posuvníku
Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.