CSS Loader Generator

Hvað er þetta verkfæri?

CSS hleðslustak er lítið hreyft stak — snúningshringur, skoppandi punktar, blikkandi hringur, eða hreyfanleg framvindusláa — notað til að sýna að efni sé að hlaðast, án JavaScript-hreyfilúppu og án myndar eða GIF-skrár. Það er búið til úr nokkrum CSS reglum auk @keyframes blokkar sem skilgreinir hvernig stakið hreyfist yfir tíma.

Þetta tól býr til fjögur algeng hleðslumynstur með raunverulegu, virku CSS-i: snúningshring byggðan á jaðri, þrjá punkta sem skoppa í röð, hring sem blikkar inn og út, og sláa með rennandi fyllingu. Stilltu stærð, lit og hreyfimyndarlengd í beinni forskoðun, afritaðu svo CSS-ið sem myndast og lágmarks HTML-stakið sem það á við.

Heimild: CSS Animations Level 1, W3C — staðallinn sem skilgreinir @keyframes og hreyfimyndareiginleikana sem þessi hleðslustök byggja á.

Af hverju að nota það?

• Bein forskoðun hreyfist í rauntíma við hverja breytingu á stíl, stærð, lit eða hraða — sjáðu nákvæmlega það sem þú munt birta.
• Býr til allt CSS-ið, þar með talið @keyframes blokkina, ekki bara brot sem þú þarft að klára sjálf(ur).
• Skilar líka nákvæmri HTML-mörkun sem CSS-ið gerir ráð fyrir, svo engin þörf er á að giska á klasanöfn eða stakabyggingu.
• Fjögur ólík hreyfimynstur (snúningur, punktar, blik, sláa) ná yfir algengustu hleðslutilvikin.
• Hrein CSS-hreyfimynd — ekkert JavaScript, engar myndaskrár, smærri og mýkri en hreyfð GIF-mynd.
• Keyrir algjörlega í vafranum þínum, ókeypis, engin skráning.

Hvernig á að nota það

1. Veldu hleðslustíl: snúningshring, skoppandi punkta, blikkandi hring, eða framvindusláa.
2. Dragðu stærðarsleðann til að stækka eða minnka hleðslustakið.
3. Veldu lit — þetta verður áherslulitur hleðslustaksins (snúningsjaðarinn, punktarnir, eða slárfyllingin).
4. Stilltu hraða til að gera hreyfimyndina hraðari eða hægari; flestir viðmótshleðarar lesast best á milli 0,6 og 1,5 sek. á hring.
5. Afritaðu CSS-ið sem myndast inn í stílblaðið þitt og límdu HTML-brotið þar sem þú þarft hleðslustakið að birtast.

Dæmi

Inntak

Stíll: snúningshringur · Stærð: 40px · Litur: appelsínugulur · Hraði: 1,0s

Úttak

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

Klassískur hringsnúningur: hringur með gegnsæjum-líkum jaðri á þremur hliðum og heilum lit á þeirri fjórðu, sem snýst stöðugt með línulegri, endalausri hreyfimynd.

Af hverju CSS-hleðarar frekar en hreyfðar GIF-myndir

Hreyfðar GIF-hlaðstjörnur voru sjálfgefnar árum saman, en CSS-hleðari er nánast alltaf betri kostur í dag: það eru nokkur hundruð bæti af texta í stað tvöfaldrar myndaskrár, hann kvarðast í hvaða stærð sem er án pixlunar því hann er teiknaður með jöðrum og transform, og litinn má breyta samstundis með einni CSS-breytu í stað þess að flytja út nýja mynd.

Fjórir stílarnir hér — snúningur, punktar, blik, sláa — eru líka þeir sem koma oftast fyrir í raunverulegum viðmótum, allt frá hleðslustöðu hnappa til yfirlags á heilli síðu. Hver þeirra notar aðeins transform og opacity breytingar í keyframes sínum, sem vafrar geta hreyft mjúklega á skjákortinu án þess að hökta restina af síðunni.

Val á stíl eftir aðstæðum

• Snúningshringur: hlutlausasti, almennasti kosturinn — hentar vel inni í hnöppum og litlum innlínuhleðslustöðum.
• Skoppandi punktar: lesast léttari og leikandi; algengt fyrir spjallgluggans 'er að skrifa...' vísbendingar og stuttar biðir.
• Blikkandi hringur: gott fyrir eitt hleðslumerki eða sem 'virk/live' stöðupunkt.
• Framvindusláa: gefur til kynna framvindu og er oft ætlast til við hleðslu síðu eða fjölþrepa ferli, jafnvel án nákvæmrar prósentu.

Notkun hleðarans í verkefninu þínu

Límdu CSS-ið sem myndast inn í stílblaðið þitt einu sinni, notaðu svo HTML-brotið aftur og aftur hvar sem þú þarft hleðslustöðu — inni í hnappi meðan eyðublað sendist, yfir korti meðan gögn sækjast, eða miðjað í yfirlagi á heilli síðu. Þar sem hreyfimyndin er hrein CSS er jafn einfalt að kveikja og slökkva á henni og að bæta staknum við eða fjarlægja hann úr DOM-inu, eða fela hann með display: none.

→

Algengar spurningar