CSS krovimo animacijos generatorius

Pasirinkite krovimo animacijos stilių, koreguokite dydį, spalvą ir animacijos greitį, ir šis įrankis sugeneruos pilną CSS kodą — įskaitant @keyframes taisyklę — plius atitinkamą HTML žymėjimą, kad galėtumėte nukopijuoti veikiančią krovimo animaciją nerašydami jokio animacijos kodo ranka.

Kas yra šis įrankis?

CSS krovimo indikatorius yra mažas animuotas elementas — besisukantis žiedas, šokinėjantys taškai, pulsuojantis apskritimas ar judanti progreso juosta — naudojamas parodyti, kad turinys kraunasi, be jokio JavaScript animacijos ciklo ir be paveikslėlio ar GIF failo. Jis sukurtas iš kelių CSS taisyklių plius @keyframes bloko, apibrėžiančio, kaip elementas juda laikui bėgant.

Šis įrankis sugeneruoja keturis dažnus krovimo indikatorių šablonus su realiu, veikiančiu CSS kodu: besisukantį rėmeliu pagrįstą sukiklį, tris paeiliui šokinėjančius taškus, apskritimą, pulsuojantį į vidų ir išorę, ir juostą su slenkančiu užpildu. Koreguokite dydį, spalvą ir animacijos trukmę gyvoje peržiūroje, tada kopijuokite sugeneruotą CSS ir minimalų HTML elementą, kuriam jis taikomas.

Šaltinis: CSS Animations Level 1, W3C — specifikacija, apibrėžianti @keyframes ir animacijos savybes, kuriomis pagrįsti šie krovimo indikatoriai.

Kodėl jį naudoti?

Gyva peržiūra animuojama realiu laiku, keičiant stilių, dydį, spalvą ar greitį — matote tiksliai tai, ką pateiksite.
Sugeneruoja pilną CSS kodą, įskaitant @keyframes bloką, o ne vien fragmentą, kurį turite baigti patys.
Taip pat sugeneruoja tikslų HTML žymėjimą, kurio tikisi CSS kodas, tad nereikia spėlioti klasių pavadinimų ar elemento struktūros.
Keturi skirtingi animacijos šablonai (sukiklis, taškai, pulsavimas, juosta) apima dažniausius krovimo būsenos naudojimo atvejus.
Grynas CSS animacija — jokio JavaScript, jokių paveikslėlių, mažesnė ir sklandesnė nei animuotas GIF.
Viskas vyksta jūsų naršyklėje, nemokama, be registracijos.

Kaip naudoti

Pasirinkite krovimo animacijos stilių: besisukantį žiedą, šokinėjančius taškus, pulsuojantį apskritimą ar progreso juostą.
Vilkite dydžio slankiklį, kad padidintumėte ar sumažintumėte animaciją.
Pasirinkite spalvą — ji taps krovimo indikatoriaus akcentine spalva (besisukantis rėmelis, taškai ar juostos užpildas).
Koreguokite greitį, kad animacija būtų greitesnė ar lėtesnė; dauguma sąsajos krovimo indikatorių geriausiai skaitosi tarp 0,6 s ir 1,5 s per ciklą.
Nukopijuokite sugeneruotą CSS į savo stilių lapą ir įklijuokite HTML fragmentą ten, kur reikia rodyti krovimo indikatorių.

Pavyzdys

Įvestis

Stilius: besisukantis žiedas · Dydis: 40px · Spalva: oranžinė · Greitis: 1,0 s

Išvestis

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

Klasikinis žiedo sukiklis: apskritimas su beveik permatomu rėmeliu trijose pusėse ir vientisos spalvos ketvirtoje, nuolat sukamas su tiesine, begaline animacija.

Kodėl CSS krovimo indikatoriai, o ne animuoti GIF

Animuoti GIF sukikliai ilgus metus buvo numatytas pasirinkimas, tačiau šiandien CSS krovimo indikatorius beveik visada geresnis pasirinkimas: tai keli šimtai baitų teksto, o ne dvejetainis paveikslėlio failas, jis skaluojasi bet kokiu dydžiu be pikseliavimo, nes piešiamas rėmeliais ir transformacijomis, o jo spalvą galima akimirksniu pakeisti vienu CSS kintamuoju vietoj naujo paveikslėlio eksportavimo.

Keturi čia pateikti stiliai — sukiklis, taškai, pulsavimas, juosta — taip pat yra tie, kurie dažniausiai pasitaiko realiose sąsajose, nuo mygtukų krovimo būsenų iki viso puslapio perdangų. Kiekvienas savo keyframes naudoja tik transform ir opacity pokyčius, kuriuos naršyklės gali sklandžiai animuoti GPU, nesudarant trukdžių likusiam puslapiui.

Stiliaus pasirinkimas pagal situaciją

Besisukantis žiedas: neutraliausias, universalus pasirinkimas — gerai tinka mygtukų viduje ir mažoms integruotoms krovimo būsenoms.
Šokinėjantys taškai: skaitosi lengviau ir žaismingiau; dažnas pokalbių „rašo..." indikatoriams ir trumpiems laukimams.
Pulsuojantis apskritimas: geras vieno elemento krovimo indikatoriui ar kaip „aktyvus/tiesiogiai" būsenos taškas.
Progreso juosta: implikuoja judėjimą į priekį ir dažnai laukiama puslapių krovimui ar daugiaetapiams procesams, net be tikslaus procento.

Krovimo indikatoriaus naudojimas jūsų projekte

Įklijuokite sugeneruotą CSS į savo stilių lapą vieną kartą, tada pakartotinai naudokite HTML fragmentą bet kur, kur reikia krovimo būsenos — mygtuko viduje, kol pateikiama forma, virš kortelės, kol gaunami duomenys, ar centre viso puslapio perdangoje. Kadangi animacija yra grynas CSS, jos įjungimas ir išjungimas yra taip paprasta, kaip pridėti ar pašalinti elementą iš DOM, ar paslėpti su display: none.

→ box-shadow generatorius · CSS minifikatorius

Dažniausiai užduodami klausimai

Ar šie krovimo indikatoriai veikia be JavaScript?

Taip — kiekvienas čia esantis indikatorius animuojamas grynai CSS @keyframes ir animation savybe. JavaScript reikalingas tik jei norite rodyti ar slėpti indikatorių pagal įvykį, pavyzdžiui, formos pateikimą ar fetch užklausos pabaigą.

Kodėl sugeneruotas CSS apima @keyframes bloką?

CSS animacijoms reikia dviejų dalių: elemento bazinio stiliaus (dydis, spalva, forma) ir @keyframes taisyklės, aprašančios, kaip tie stiliai keičiasi animacijos trukmės metu. Abi dalys būtinos, kad animacija veiktų, tad šis įrankis visada sugeneruoja pilną porą, o ne vien bazinį stilių.

Ar galiu naudoti daugiau nei vieną krovimo indikatoriaus stilių tame pačiame puslapyje?

Taip. Kiekvienas stilius sugeneruoja savo unikaliai pavadintas CSS klases ir keyframes (pavyzdžiui, css-loader-spinner ir css-loader-dots), tad galite nukopijuoti kelis stilius į tą patį stilių lapą be konfliktų.

Ar krovimo animacija sulėtins mano puslapį?

Ne — visi keturi stiliai animuoja tik transform ir opacity, kuriuos naršyklės gali apdoroti kompozitoriuje/GPU nesukeldamos išdėstymo perskaičiavimo. Tai išlaiko juos sklandžius net silpnesniuose įrenginiuose, kitaip nei animuojant tokias savybes kaip width ar top tiesiogiai.

Kaip vėliau pakeisti indikatoriaus spalvą jo negeneruojant iš naujo?

Atidarykite nukopijuotą CSS ir tiesiogiai pakeiskite spalvos reikšmę — ji pasirodo vieną kartą (kaip border-top-color, background ar panašiai, priklausomai nuo stiliaus), o ne dubliuojama visoje taisyklėje, tad vienas rasti-ir-pakeisti atnaujina ją visur, kur ji naudojama.