CSS Loader generaator

Vali laadimisindikaatori stiil, reguleeri suurust, värvi ja animatsiooni kiirust ning see tööriist genereerib täieliku CSS-i — sealhulgas @keyframes reegli — koos vastava HTML märgistusega, nii et saad kopeerida töötava laadimisanimatsiooni ilma ühtegi animatsioonikoodi käsitsi kirjutamata.

Mis see tööriist on?

CSS loader on väike animeeritud element — pöörlev rõngas, põrkuvad punktid, pulseeriv ring või liikuv edenemisriba —, mida kasutatakse näitamaks, et sisu laadib, ilma JavaScripti animatsioonitsüklita ning ilma pildi- või GIF-failita. See koosneb paarist CSS reeglist ning @keyframes plokist, mis defineerib, kuidas element aja jooksul liigub.

See tööriist genereerib neli levinud laadimismustrit reaalse, töötava CSS-iga: pöörleval äärisel põhinev pöörleja, kolm järjestikku põrkuvat punkti, ring, mis pulseerib sisse-välja, ning liuguva täitega riba. Reguleeri suurust, värvi ja animatsiooni kestust reaalajas eelvaates ning kopeeri seejärel loodud CSS ja minimaalne HTML element, millele see rakendub.

Allikas: CSS Animations Level 1, W3C — spetsifikatsioon, mis defineerib @keyframes ja animatsiooniomadused, millest need laadimisindikaatorid on ehitatud.

Miks seda kasutada?

Eelvaade animeerib reaalajas iga stiili, suuruse, värvi või kiiruse muutuse peale — näed täpselt, mida saadad tootmisesse.
Genereerib täieliku CSS-i, sealhulgas @keyframes ploki, mitte lihtsalt katkendit, mille pead ise lõpetama.
Väljastab ka täpse HTML märgistuse, mida CSS eeldab, nii et pole vaja klassinimede ega elemendi struktuuri osas aimata.
Neli erinevat animatsioonimustrit (pöörleja, punktid, pulss, riba) katavad kõige levinumad laadimisoleku kasutusjuhud.
Puhas CSS animatsioon — ei JavaScripti ega pildifaile, väiksem ja sujuvam kui animeeritud GIF.
Töötab täielikult sinu brauseris, tasuta, registreerimist pole vaja.

Kuidas kasutada

Vali laadimisindikaatori stiil: pöörlev rõngas, põrkuvad punktid, pulseeriv ring või edenemisriba.
Lohista suuruse liugurit, et laadimisindikaatorit suurendada või vähendada.
Vali värv — sellest saab laadimisindikaatori aktsentvärv (pöörlev äär, punktid või riba täidis).
Reguleeri kiirust, et animatsiooni kiirendada või aeglustada; enamik UI laadimisindikaatoreid mõjub kõige paremini vahemikus 0,6–1,5 sekundit tsükli kohta.
Kopeeri loodud CSS oma stiililehele ja kleebi HTML katkend sinna, kus vajad laadimisindikaatorit näidata.

Näide

Sisend

Stiil: pöörlev rõngas · Suurus: 40px · Värv: oranž · Kiirus: 1,0s

Tulemus

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

Klassikaline rõngaspöörleja: ring, mille äärel on kolmel küljel poolläbipaistev äär ja neljandal küljel ühtlane värv, mida pööratakse pidevalt lineaarse, lõputu animatsiooniga.

Miks CSS laadimisindikaatorid animeeritud GIF-ide asemel

Animeeritud GIF pöörlejad olid aastaid vaikimisi valik, kuid CSS loader on tänapäeval peaaegu alati parem valik: see on paarsada baiti teksti, mitte binaarne pildifail, see skaleerub mistahes suuruseni ilma pikslistumiseta, kuna see on joonistatud ääriste ja transformidega, ning selle värvi saab koheselt muuta ühe CSS muutujaga, ilma pilti uuesti eksportimata.

Neli siin toodud stiili — pöörleja, punktid, pulss, riba — on ka need, mis esinevad päris liidestes kõige sagedamini, alates nupu laadimisolekutest kuni täislehe kattekihtideni. Igaüks kasutab oma keyframes-plokis ainult transform ja opacity muutusi, mida brauserid saavad sujuvalt GPU-l animeerida ilma ülejäänud lehte häirimata.

Stiili valimine olukorra jaoks

Pöörlev rõngas: kõige neutraalsem, üldotstarbelisem valik — sobib hästi nuppude sees ja väikeste sisejoonsete laadimisolekute jaoks.
Põrkuvad punktid: mõjub kergema ja mängulisemana; levinud vestluse 'kirjutab...' indikaatorite ja lühikeste ootamiste jaoks.
Pulseeriv ring: sobib hea üksiku elemendi laadimisindikaatorina või 'aktiivne/live' staatusepunktina.
Edenemisriba: viitab edasiliikumisele ja eeldatakse tihti lehekülje laadimiste või mitmeastmeliste protsesside jaoks, isegi ilma täpse protsendita.

Laadimisindikaatori kasutamine oma projektis

Kleebi loodud CSS oma stiililehele üks kord, seejärel kasuta HTML katkendit uuesti igal pool, kus vajad laadimisolekut — nupu sees vormi saatmise ajal, kaardi peal andmete laadimisel või tsentreeritult täislehe kattekihil. Kuna animatsioon on puhas CSS, on selle sisse- ja väljalülitamine sama lihtne kui elemendi lisamine või eemaldamine DOM-ist, või selle peitmine display: none abil.

→ Box Shadow Generaator · CSS Minifier

Korduma kippuvad küsimused

Kas need laadimisindikaatorid töötavad ilma JavaScriptita?

Jah — iga siinne loader on animeeritud puhtalt CSS @keyframes ja animation omadusega. JavaScripti on vaja ainult siis, kui soovid laadimisindikaatorit näidata või peita sündmuse põhjal, näiteks vormi saatmine või fetch-päringu lõppemine.

Miks sisaldab loodud CSS @keyframes plokki?

CSS animatsioonid vajavad kahte osa: elemendi baasstiile (suurus, värv, kuju) ning @keyframes reeglit, mis kirjeldab, kuidas need stiilid animatsiooni kestel muutuvad. Mõlemad on animatsiooni käivitumiseks vajalikud, seega genereerib see tööriist alati täieliku paari, mitte ainult baasstiili.

Kas ma saan sama lehe peal kasutada rohkem kui ühte laadimisindikaatori stiili?

Jah. Iga stiil genereerib oma unikaalselt nimetatud CSS klassid ja keyframes (näiteks css-loader-spinner ja css-loader-dots), nii et saad kopeerida mitu stiili samasse stiililehte ilma nendevahelisi konflikte tekitamata.

Kas laadimisindikaatori animatsioon aeglustab mu lehte?

Ei — kõik neli stiili animeerivad ainult transform ja opacity omadusi, mida brauserid saavad käidelda kompositori/GPU tasandil, käivitamata layout'i ümberarvutust. See hoiab need sujuvatena ka nõrgema võimsusega seadmetel, erinevalt selliste omaduste nagu width või top otsesest animeerimisest.

Kuidas ma saan laadimisindikaatori värvi hiljem muuta ilma seda uuesti genereerimata?

Ava kopeeritud CSS ja muuda värviväärtust otse — see esineb üks kord (kas border-top-color, background või sarnasena, sõltuvalt stiilist), mitte pole dubleeritud kogu reegli ulatuses, nii et üks otsi-ja-asenda värskendab seda kõikjal, kus seda kasutatakse.