Generator CSS nalagalnikov

Izberi slog nalagalnika, prilagodi velikost, barvo in hitrost animacije, orodje pa ustvari celoten CSS — vključno s pravilom @keyframes — ter pripadajočo HTML kodo, tako da lahko kopiraš delujočo animacijo nalaganja, ne da bi sam pisal kodo za animacijo.

Kaj je to orodje?

CSS nalagalnik je majhen animiran element — vrteč se krog, poskakujoče pike, utripajoč krog ali premikajoča se vrstica napredka — ki prikazuje, da se vsebina nalaga, brez JavaScript animacijske zanke ter brez slike ali GIF-a. Sestavljen je iz nekaj CSS pravil in bloka @keyframes, ki določa, kako se element spreminja skozi čas.

To orodje ustvari štiri pogoste vzorce nalagalnikov z resničnim, delujočim CSS-om: vrteč se spinner na osnovi obrobe, tri pike, ki poskakujejo v zaporedju, krog, ki utripa navznoter in navzven, ter vrstico z drsečim polnjenjem. Prilagodi velikost, barvo in trajanje animacije v živi predogledu, nato kopiraj ustvarjeni CSS in minimalen HTML element, na katerega se nanaša.

Vir: CSS Animations Level 1, W3C — specifikacija, ki definira @keyframes in lastnosti animation, na katerih temeljijo ti nalagalniki.

Zakaj ga uporabiti?

Živi predogled animira v realnem času, ko spreminjaš slog, velikost, barvo ali hitrost — vidiš točno, kaj boš objavil.
Ustvari celoten CSS, vključno z blokom @keyframes, ne le odlomek, ki bi ga moral sam dokončati.
Prav tako izpiše natančno HTML kodo, ki jo CSS pričakuje, tako da ni ugibanja glede imen razredov ali strukture elementov.
Štirje različni vzorci animacije (spinner, pike, utrip, vrstica) pokrijejo večino pogostih primerov stanj nalaganja.
Čista CSS animacija — brez JavaScripta, brez slikovnih datotek, manjša in bolj gladka od animiranega GIF-a.
Deluje v celoti v tvojem brskalniku, brezplačno, brez prijave.

Kako ga uporabljati

Izberi slog nalagalnika: vrteč se krog, poskakujoče pike, utripajoč krog ali vrstico napredka.
Povleci drsnik velikosti, da nalagalnik povečaš ali zmanjšaš.
Izberi barvo — ta postane poudarjena barva nalagalnika (vrteča obroba, pike ali polnjenje vrstice).
Prilagodi hitrost, da animacijo pospešiš ali upočasniš; večina nalagalnikov v uporabniškem vmesniku deluje najbolje med 0,6 s in 1,5 s na cikel.
Kopiraj ustvarjeni CSS v svojo tabelo slogov in prilepi HTML odlomek povsod, kjer želiš, da se nalagalnik prikaže.

Primer

Vnos

Slog: vrteč se krog · Velikost: 40px · Barva: oranžna · Hitrost: 1,0s

Rezultat

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

Klasičen vrteč se spinner: krog s skoraj prosojno obrobo na treh straneh in polno barvo na četrti, ki se neprekinjeno vrti z linearno, neskončno animacijo.

Zakaj CSS nalagalniki namesto animiranih GIF-ov

Animirani GIF spinnerji so bili leta privzeta izbira, a danes je CSS nalagalnik skoraj vedno boljša izbira: gre za nekaj sto bajtov besedila namesto binarne slikovne datoteke, poljubno se poveča brez pikselizacije, saj je narisan z obrobami in transformacijami, njegovo barvo pa lahko takoj spremeniš z eno CSS spremenljivko namesto ponovnega izvoza slike.

Štirje slogi tukaj — spinner, pike, utrip, vrstica — so tudi tisti, ki se najpogosteje pojavljajo v resničnih vmesnikih, od stanj nalaganja gumbov do prekrivanja cele strani. Vsak uporablja samo spremembe transform in opacity v svojih keyframes, ki jih lahko brskalniki gladko animirajo na GPU-ju, ne da bi upočasnili preostanek strani.

Izbira sloga glede na situacijo

Vrteč se krog: najbolj nevtralna, splošno uporabna izbira — dobro deluje znotraj gumbov in majhnih vrstičnih stanj nalaganja.
Poskakujoče pike: deluje bolj lahkotno in igrivo; pogosto se uporablja za oznake 'tipkanje...' v klepetu in kratka čakanja.
Utripajoč krog: dober za en sam element indikatorja nalaganja ali kot pika stanja 'aktivno/v živo'.
Vrstica napredka: nakazuje premikanje naprej in je pogosto pričakovana pri nalaganju strani ali večstopenjskih postopkih, tudi brez natančnega odstotka.

Uporaba nalagalnika v tvojem projektu

Prilepi ustvarjeni CSS v svojo tabelo slogov enkrat, nato pa HTML odlomek ponovno uporabi povsod, kjer potrebuješ stanje nalaganja — znotraj gumba med oddajo obrazca, čez kartico med pridobivanjem podatkov ali na sredini prekrivanja cele strani. Ker je animacija čist CSS, je vklop in izklop tako preprost, kot dodajanje ali odstranjevanje elementa iz DOM-a, ali skrivanje z display: none.

→ Generator box-shadow · CSS minifikator

Pogosta vprašanja

Ali ti nalagalniki delujejo brez JavaScripta?

Da — vsak nalagalnik tukaj je animiran izključno s CSS @keyframes in lastnostjo animation. JavaScript je potreben le, če želiš nalagalnik prikazati ali skriti glede na dogodek, kot je oddaja obrazca ali zaključek fetch zahteve.

Zakaj ustvarjeni CSS vključuje blok @keyframes?

CSS animacije potrebujejo dva dela: osnovne sloge elementa (velikost, barvo, obliko) in pravilo @keyframes, ki opisuje, kako se ti slogi spreminjajo skozi trajanje animacije. Oba sta potrebna, da animacija deluje, zato to orodje vedno ustvari celoten par namesto samega osnovnega sloga.

Ali lahko na isti strani uporabim več kot en slog nalagalnika?

Da. Vsak slog ustvari svoje unikatno poimenovane CSS razrede in keyframes (na primer css-loader-spinner in css-loader-dots), tako da lahko kopiraš več slogov v isto tabelo slogov, ne da bi si nasprotovali.

Bo animacija nalagalnika upočasnila mojo stran?

Ne — vsi štirje slogi animirajo samo transform in opacity, kar lahko brskalniki obravnavajo na compositorju/GPU-ju brez sprožitve ponovnega izračuna postavitve. To jih ohranja gladke tudi na manj zmogljivih napravah, za razliko od animiranja lastnosti, kot sta width ali top.

Kako kasneje spremenim barvo nalagalnika, ne da bi ga ponovno ustvaril?

Odpri kopirani CSS in neposredno spremeni vrednost barve — pojavi se le enkrat (kot border-top-color, background ali podobno, odvisno od sloga), namesto da bi bila podvojena po celotnem pravilu, tako da jo z enim iskanjem in zamenjavo posodobiš povsod.