Hogyan készítsünk visszaszámlálót CSS-el?

Kevés olyan megoldás van, amire ne találnánk egy jó kiinduló pontot vagy alternatívát, ha a megfelelő kulcsszavakra keresünk. Nekem egy preloader “pörgettyűre” és visszaszámlálóra volt szükségem, hát jól rá is kerestem.

Rengeteg preloader megoldás található a neten: generátorok, megírt kis kódok, gifek és egyebek. Viszont én mindenképpen olyan megoldást szerettem volna, ami natív CSS, lehetőleg javascript nélkül. Mivel a böngészők egyre fejlettebb CSS támogatással vannak felvértezve, gondoltam, használjuk ki ezeket. Hamar rá is bukkantam a megfelelőnek ígérkező megoldásra, és némi átírás és kibővítés után végül meg is született az alábbi kód.

A HTML markup végtelenül egyszerű, magyarázatra sem szorul:

Ez jelen esetben háromtól számol vissza, de ez elég könnyen módosítható.

A kódunkban így mutat a countdown-wrap div konténerünk, az alábbi néhány formázással:

Ezt a div-et alapvetően el is hagyhatnánk, és a szükséges tulajdonságokat a countdown div-re ruházhatjuk át – nekem így tisztábbnak tűnt és könnyebben kezelhetőnek; módosíthatónak, bárhová beilleszthetőnek .

A countdown div-vel formázzuk hát meg a szürke hátterű kört és megadjuk egy animation-nel, hogy 3 másodperc után legyen láthatatlan. A “pörgettyűnk” 50×50 px méretet kapta:

Készítünk egy after pszeudót a countdown div-nek, ami egy “fake mask” – egy fehér hátterű kör, ami kisebb a countdown div-nél, így kapjuk meg a 3 px vékony szürke kört. Ha nem fehér háttérre tesszük a “pörgettyűt”, akkor az itt lévő háttérszínt kell módosítanunk, hogy továbbra is maszknak tűnjön, már ha ez a cél.

Íme:

Ezt követően megformázzuk a számokat, hogy a megfelelő méretben, a megfelelő helyen és időben jelenjenek meg, majd tűnjenek el. A számokat abszolút pozícióval kell a bal felső sarokhoz igazítani ahhoz, hogy a kör közepén jelenjenek meg. Átlátszóságuk nulla, melyet majd az animáció módosít az 1 másodperces futásakor, elején és végén az idő 10%-a alatt, láthatóra, majd nem láthatóra. Azért, hogy a számok ne egyszerre jelenjenek meg, hanem egymás után, ahogyan egy visszaszámlálóhoz illik, megadunk nekik 0, 1 és 2 másodperces várakoztatást, hogy melyik szám mikor hívja meg az animációt. Így tehát a hármas szám, amivel kezdünk, nem várakozik;  kettes szám 1 másodperc után hívja az animációt, míg az egyes szám 2 másodpercet várakozik az animáció hívása előtt.

A végére hagytam az igazán látványos részt, amikor a “pörgettyű” animációját alakítjuk ki.

A side div-ek mindketten egy 50% széles téglalapok, melyek balra és jobbra helyezkednek el egymás mellett, kitöltve így a countdown szülő elemet. Ezek maszkként funkcionálnak majd a fill div gyermek elemük számára.

A fill div-ek mindketten egy-egy félkört alkotnak, az ellenkező oldalon, mint a szülőelemük, így alapesetben nem láthatóak, hiszen pozíciójuk kívül helyezi őket a szülőelem által befoglalt területen.

Ezek az elemek 2 másodperc alatt fordulnak teljesen körbe, bevárva egymást minkét oldalon. Így a “pörgettyű” felváltva lesz kitöltött és nem kitöltött egy-egy másodpercre, azaz világosszürke (ez a countdown div háttérszine), és sötétszürke (ez a fill div-ek háttérszine).

A csík színe úgy változik, hogy az adott fill div elfordulásakor, vagy a szülőelemének pozíciójára fordul rá (ekkor lesz látható és kitölti a világos szürke csíkot a sötét szürke), vagy abból fordul ki (ekkor pedig a sötétszürke csíkból egyre kevesebb, végül semmi nem lesz látható).

A leírt kódokban nem használtam a prefix-eket (-webkit-, -moz-, stb.) a szükséges helyeken, ezeket mindenképpen érdemes elkészíteni hozzá, amennyiben ezt a megoldást választjuk.

A countdown nagyon jól működött, azonban végül az igény úgy módosult, hogy a visszaszámlálás időtartama dinamikusan módosítható legyen, így mégis befészkelte magát az eredménybe a javascript. Azonban ha fix másodpercre van szükség, akkor ez jó megoldás lehet bárki számára.

Végül a teljes kód JADE és LESS formátumban, és az eredmény.

See the Pen LEwEYZ by Gabor (@alecpen) on CodePen.

A hibátlan kód meséje

Vegyünk egy konkrét példát: Az adott oldalra ellátogató felhasználónak a felületen meg kell jeleníteni két gombot. Az előzetesen átküldött dizájnon…