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
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.