A várakozás hosszú másodpercei

A gép forog, az alkotó… az alkotó feszülten várja, hogy eltűnjön az a rohadt homokóra…!

Ismered az érzést, ugye? A homokórázást, vagy a körözést, meg a csíkot, ami még 95%-ig elvánszorog, de ott mintha megállna.

[su_highlight background=”#00dbf7″ color=”#ffffff”]Loading… Please wait![/su_highlight]

És te nem tehetsz semmit. Vársz. Még mindig vársz. És még mindig vársz.

Sokáig úgy tűnt, mintha a várakozás egyetlen módja a rohadék homokóra rohadék forgásának meredt bámulása volna.

 

Aztán jöttek a körkörös megoldások. Azok se voltak sokkal jobbak.

Ilyesmiket ma már az ember könnyedén leprogramozhat magának CSS-ben, ha kicsit is ért hozzá, de előre elkészített elemekből is össze lehet rakni őket, másodpercek alatt, például a cssload.net-en.

De aztán szépen lassan elkezdték belátni a szakemberek, hogy lehet ezt máshogy is. Hogy mehet bele esetleg fantázia. Lehet egyéni, a program vagy honlap stílusához passzoló a megoldás. Szóval hogy lehet szép és stílusos.

Először merült fel, hogy talán lehet ez színes is.

Érdekes módon a körök, pöttyök, karikák megmaradtak. A loader animációk legjellemzőbb formái máig ezek. Valahogy benne van az idő múlásának illúziója a mozgásban, meg az állandóság („itt fogok megrohadni a gép előtt”) érzése a körformában.

De azért van persze mindenféle más geometrikus forma is:

 

Aztán elszabadultak a grafikusok, és senki nem állíthatta meg őket többé:

Mennyivel könnyebben telik az idő, ha közben mókuskerékben taposó macskát nézel, nem?

Vagy ööö… pulzáló tojást.

Esetleg egy forgó krumplit. (??)

A legújabb webdesign és mobilapplikáció trendek és technológiák is kitermelték a maguk saját loader animációs stílusukat. A legutóbbi divatot követve jobbára letisztult, egyszerű, lapos (flat) cuccok, van köztük egy csomó szép is. Most éppen nem is alkalmazott grafikus animálja őket, hanem programozó, CSS-ben.

(Bár, amerre a dolgok mostanában mennek, egyre több olyan fejlesztés lát napvilágot, ahol programozási ismeretek nélkül lehet weblapot vagy akár animációt csinálni, így a grafikusoknak egyre könnyebb a dolga. Meglátjuk, mit hoz a jövő.)

Mozgás közben ezeket itt tudod megnézni: http://tobiasahlin.com/spinkit/ – ugyanitt a forráskódok is elérhetők.

És ezeknek is megtalálod a forráskódját:

See the Pen Loaders (WIP) by Tania LD (@TaniaLD) on CodePen.

See the Pen Such Spinners, Much Loading by Hsu-Cherng (@Zeneraith) on CodePen.

See the Pen Multi color loader by Emmanuel Franc (@Emmanuel_Franc) on CodePen.

See the Pen Loader #1 by Sam Lillicrap (@samueljweb) on CodePen.

Utóbbiak a designify.me-ről vannak.

A loaderek azonban többnyire nem sokkal többek, mint végtelenített animációk. Nem mondják meg, mi történik a háttérben, sőt, gyakran akkor is folytatják a pörgést, ha a géped amúgy már rég szabira ment. Ezeknél egy fokkal barátságosabbak az ún. progress bar-ok, amik azt is mutatják, hogy hol tart épp a háttérfolyamat, ami miatt várnod kell. Tudod, ez az a csík, ami mindig megáll 99%-nál.

Legközelebb azok közül nézünk pár példát.

Addig is: várjuk együtt a mikulást!: