CSS ielādes animācijas ģenerators

Kas ir šis rīks?

CSS ielādes indikators ir mazs animēts elements — rotējošs gredzens, lēkājoši punkti, pulsējošs aplis vai kustīga progresa josla — ko izmanto, lai parādītu, ka saturs tiek ielādēts, bez JavaScript animācijas cikla un bez attēla vai GIF nepieciešamības. Tas tiek veidots no dažiem CSS noteikumiem plus @keyframes bloka, kas definē, kā elements pārvietojas laika gaitā.

Šis rīks ģenerē četrus izplatītus ielādes indikatoru modeļus ar reālu, strādājošu CSS: rotējošu, uz apmalēm balstītu spinneri, trīs punktus, kas lēkā secīgi, apli, kas pulsē uz iekšu un ārā, un joslu ar slīdošu aizpildījumu. Pielāgo izmēru, krāsu un animācijas ilgumu tiešraides priekšskatījumā, tad kopē ģenerēto CSS un minimālo HTML elementu, kuram tas pielietots.

Avots: CSS Animations Level 1, W3C — specifikācija, kas definē @keyframes un animācijas īpašības, no kurām šie ielādes indikatori ir veidoti.

Kāpēc to izmantot?

• Tiešraides priekšskatījums animējas reālajā laikā, mainot stilu, izmēru, krāsu vai ātrumu — redzi tieši to, ko izmantosi projektā.
• Ģenerē pilnu CSS, ieskaitot @keyframes bloku, nevis tikai fragmentu, kas jāpabeidz pašam.
• Izvada arī precīzu HTML marķējumu, kuru CSS sagaida, tāpēc nav jāmin par klašu nosaukumiem vai elementu struktūru.
• Četri atšķirīgi animācijas modeļi (spinneris, punkti, pulsācija, josla) sedz visbiežāk sastopamos ielādes stāvokļa lietojuma gadījumus.
• Tīra CSS animācija — nav JavaScript, nav attēlu resursu, mazāka un gludāka nekā animēts GIF.
• Darbojas pilnībā tavā pārlūkā, bezmaksas, nav reģistrācijas.

Kā to lietot

1. Izvēlies ielādes indikatora stilu: rotējošu gredzenu, lēkājošus punktus, pulsējošu apli vai progresa joslu.
2. Velc izmēra slīdni, lai palielinātu vai samazinātu indikatoru.
3. Izvēlies krāsu — tā kļūst par indikatora akcenta krāsu (rotējošo apmali, punktus vai joslas aizpildījumu).
4. Pielāgo ātrumu, lai animāciju padarītu ātrāku vai lēnāku; lielākā daļa UI indikatoru izskatās vislabāk starp 0,6s un 1,5s vienam ciklam.
5. Kopē ģenerēto CSS savā stilu failā un ievieto HTML fragmentu, kur vien vajag, lai parādītos indikators.

Piemērs

Ievade

Stils: rotējošs gredzens · Izmērs: 40px · Krāsa: oranža · Ātrums: 1,0s

Izvade

.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); }
}

Klasisks gredzena spinneris: aplis ar caurspīdīgu apmali trijās pusēs un vienkrāsainu apmali ceturtajā pusē, nepārtraukti rotēts ar lineāru, bezgalīgu animāciju.

Kāpēc CSS ielādes indikatori animēto GIF vietā

Animēti GIF spinneri gadiem bija noklusējuma izvēle, taču CSS ielādes indikators šodien gandrīz vienmēr ir labākā izvēle: tas ir dažus simtus baitu teksta, nevis bināra attēla fails, tas mērogojas jebkurā izmērā bez pikselēšanās, jo tiek zīmēts ar apmalēm un transformācijām, un tā krāsu var mainīt uzreiz ar vienu CSS mainīgo, nevis no jauna eksportējot attēlu.

Šie četri stili — spinneris, punkti, pulsācija, josla — arī ir tie, kas visbiežāk parādās reālās saskarnēs, sākot no pogu ielādes stāvokļiem līdz pilnas lapas pārklājumiem. Katrs izmanto tikai transform un opacity izmaiņas savos keyframes, ko pārlūki var animēt gludi uz GPU, neizraisot pārējās lapas raustīšanos.

Stila izvēle situācijai

• Rotējošs gredzens: visneitrālākā, universālākā izvēle — labi darbojas pogu iekšpusē un mazos rindas ielādes stāvokļos.
• Lēkājoši punkti: izskatās vieglāk un rotaļīgāk; izplatīts tērzēšanas 'raksta...' indikatoriem un īsiem gaidīšanas periodiem.
• Pulsējošs aplis: labs vienam ielādes indikatora elementam vai kā 'aktīvs/tiešraidē' statusa punkts.
• Progresa josla: norāda uz virzību uz priekšu, un no tā bieži sagaida lapu ielādēm vai vairāku soļu procesiem, pat bez precīzas procentu vērtības.

Ielādes indikatora izmantošana projektā

Ievieto ģenerēto CSS savā stilu failā vienreiz, tad atkārtoti izmanto HTML fragmentu, kur vien vajag ielādes stāvokli — pogas iekšpusē, kamēr forma tiek iesniegta, virs kartītes, kamēr dati tiek ielādēti, vai centrēti pilnas lapas pārklājumā. Tā kā animācija ir tīrs CSS, tās ieslēgšana un izslēgšana ir tikpat vienkārša kā elementa pievienošana vai noņemšana no DOM, vai tā paslēpšana ar display: none.

→ Box Shadow ģenerators · CSS minifikators

Biežāk uzdotie jautājumi