Generator CSS loadera

Što je ovaj alat?

CSS loader je mali animirani element — rotirajući prsten, poskakujuće točkice, pulsirajući krug, ili pokretna traka napretka — koji se koristi za prikaz da se sadržaj učitava, bez petlje JavaScript animacije i bez potrebe za slikom ili GIF-om. Izgrađen je od nekoliko CSS pravila plus bloka @keyframes koji definira kako se element kreće tijekom vremena.

Ovaj alat generira četiri uobičajena obrasca loadera sa stvarnim, funkcionalnim CSS-om: rotirajući spinner temeljen na obrubu, tri točkice koje redom poskakuju, krug koji pulsira unutra i van, i traku s klizećim ispunom. Prilagodite veličinu, boju i trajanje animacije na prikazu uživo, zatim kopirajte generirani CSS i minimalni HTML element na koji se primjenjuje.

Izvor: CSS Animations Level 1, W3C — specifikacija koja definira @keyframes i svojstva animacije od kojih su ovi loaderi izgrađeni.

Zašto ga koristiti?

• Prikaz uživo animira se u stvarnom vremenu dok mijenjate stil, veličinu, boju ili brzinu — vidite točno ono što ćete koristiti.
• Generira potpuni CSS uključujući blok @keyframes, ne samo isječak koji morate sami dovršiti.
• Također ispisuje točan HTML markup koji CSS očekuje, tako da nema nagađanja o nazivima klasa ili strukturi elementa.
• Četiri različita obrasca animacije (spinner, točkice, puls, traka) pokrivaju najčešće slučajeve korištenja stanja učitavanja.
• Čista CSS animacija — bez JavaScripta, bez slikovnih datoteka, manja i glatkija od animiranog GIF-a.
• Izvodi se u potpunosti u vašem pregledniku, besplatno, bez prijave.

Kako ga koristiti

1. Odaberite stil loadera: rotirajući prsten, poskakujuće točkice, pulsirajući krug, ili traku napretka.
2. Povucite klizač veličine kako biste povećali ili smanjili loader.
3. Odaberite boju — ona postaje naglašena boja loadera (rotirajući obrub, točkice, ili ispuna trake).
4. Prilagodite brzinu kako biste ubrzali ili usporili animaciju; većina UI loadera najbolje djeluje između 0,6s i 1,5s po ciklusu.
5. Kopirajte generirani CSS u svoj stylesheet i zalijepite HTML isječak gdje god trebate da se loader pojavi.

Primjer

Ulaz

Stil: rotirajući prsten · Veličina: 40px · Boja: narančasta · Brzina: 1,0s

Izlaz

.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čan prsten-spinner: krug s gotovo prozirnim obrubom na tri strane i punom bojom na četvrtoj, kontinuirano rotiran linearnom, beskonačnom animacijom.

Zašto CSS loaderi umjesto animiranih GIF-ova

Animirani GIF spinneri bili su zadani izbor godinama, ali CSS loader je danas gotovo uvijek bolji izbor: nekoliko stotina bajtova teksta umjesto binarne slikovne datoteke, skalira se na bilo koju veličinu bez pikselizacije jer je nacrtan obrubima i transformacijama, a njegova se boja može trenutno promijeniti jednom CSS varijablom umjesto ponovnog izvoza nove slike.

Ova četiri stila — spinner, točkice, puls, traka — također su ona koja se najčešće pojavljuju u stvarnim sučeljima, od stanja učitavanja gumba do preklopa cijele stranice. Svaki koristi samo promjene transform i opacity u svojim keyframesima, koje preglednici mogu glatko animirati na GPU-u bez trzanja ostatka stranice.

Odabir stila za situaciju

• Rotirajući prsten: najneutralniji, univerzalni izbor — dobro funkcionira unutar gumba i malih ugrađenih stanja učitavanja.
• Poskakujuće točkice: djeluje lakše i igrivije; česte za pokazatelje 'tipka...' u chatu i kratka čekanja.
• Pulsirajući krug: dobar za pokazatelj učitavanja jednim elementom ili kao točkica statusa 'aktivno/uživo'.
• Traka napretka: podrazumijeva kretanje naprijed i često se očekuje kod učitavanja stranica ili višekoračnih procesa, čak i bez točnog postotka.

Korištenje loadera u vašem projektu

Zalijepite generirani CSS u svoj stylesheet jednom, zatim ponovno koristite HTML isječak gdje god vam treba stanje učitavanja — unutar gumba dok se obrazac šalje, preko kartice dok se dohvaćaju podaci, ili centrirano u preklopu cijele stranice. Budući da je animacija čisti CSS, uključivanje i isključivanje jednostavno je poput dodavanja ili uklanjanja elementa iz DOM-a, ili skrivanja s display: none.

→ Generator box-shadow · CSS Minifier

Često postavljana pitanja