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.

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