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í

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

CSS animace

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

Animace

Animace na webových stránkách

Jak na webu vytvářet animace a přechody v HTML, CSS a JS.

Oříznutí textu

Oříznutí dlouhého textu

Má-li se delší text vyjít do přesného místa, je třeba kousek textu uříznout.

Komentáře