CSS-lataajageneraattori

Valitse lataajan tyyli, säädä kokoa, väriä ja animaation nopeutta, niin työkalu luo täydellisen CSS:n — mukaan lukien @keyframes-säännön — sekä siihen sopivan HTML-merkinnän, jolloin voit kopioida toimivan latausanimaation kirjoittamatta animaatiokoodia itse.

Mikä tämä työkalu on?

CSS-lataaja on pieni animoitu elementti — pyörivä rengas, pomppivat pisteet, sykkivä ympyrä tai liikkuva edistymispalkki — jota käytetään osoittamaan, että sisältöä ladataan, ilman JavaScript-animaatiosilmukkaa tai kuva- tai GIF-tiedostoa. Se rakentuu muutamasta CSS-säännöstä sekä @keyframes-lohkosta, joka määrittää elementin liikkeen ajan kuluessa.

Tämä työkalu luo neljä yleistä lataajamallia oikealla, toimivalla CSS:llä: pyörivän reunukseen perustuvan spinnerin, kolme peräkkäin pomppivaa pistettä, sisään ja ulos sykkivän ympyrän sekä liukuvalla täytöllä varustetun palkin. Säädä kokoa, väriä ja animaation kestoa live-esikatselussa, kopioi sitten luotu CSS ja siihen liittyvä minimaalinen HTML-elementti.

Lähde: CSS Animations Level 1, W3C — spesifikaatio, joka määrittelee @keyframes-säännön ja animaatio-ominaisuudet, joihin nämä lataajat perustuvat.

Miksi käyttää sitä?

Live-esikatselu animoituu reaaliajassa tyyliä, kokoa, väriä tai nopeutta muuttaessasi — näet tarkalleen, mitä julkaiset.
Luo täydellisen CSS:n mukaan lukien @keyframes-lohko, ei pelkkää katkelmaa jonka joutuisit viimeistelemään itse.
Tuottaa myös täsmällisen HTML-merkinnän, jota CSS odottaa, joten luokkanimiä tai elementtirakennetta ei tarvitse arvailla.
Neljä erilaista animaatiomallia (spinner, pisteet, syke, palkki) kattaa yleisimmät latauksen tilan käyttötapaukset.
Puhdas CSS-animaatio — ei JavaScriptiä, ei kuvatiedostoja, pienempi ja sulavampi kuin animoitu GIF.
Toimii kokonaan selaimessasi, ilmainen, ei rekisteröitymistä.

Käyttöohje

Valitse lataajan tyyli: pyörivä rengas, pomppivat pisteet, sykkivä ympyrä tai edistymispalkki.
Vedä kokoliukusäädintä suurentaaksesi tai pienentääksesi lataajaa.
Valitse väri — siitä tulee lataajan korostusväri (pyörivä reunus, pisteet tai palkin täyttö).
Säädä nopeutta tehdäksesi animaatiosta nopeamman tai hitaamman; useimmat käyttöliittymän lataajat toimivat parhaiten 0,6–1,5 sekunnin syklillä.
Kopioi luotu CSS tyylitiedostoosi ja liitä HTML-katkelma sinne, missä tarvitset lataajan näkyvän.

Esimerkki

Syöte

Tyyli: pyörivä rengas · Koko: 40px · Väri: oranssi · Nopeus: 1,0s

Tuloste

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

Klassinen rengasspinneri: ympyrä, jonka reunus on kolmelta sivulta lähes läpinäkyvä ja neljänneltä täysvärinen, ja jota pyöritetään jatkuvasti lineaarisella, äärettömällä animaatiolla.

Miksi CSS-lataajat animoitujen GIF-tiedostojen sijaan

Animoidut GIF-spinnerit olivat vuosia oletusvalinta, mutta CSS-lataaja on tänä päivänä lähes aina parempi vaihtoehto: se on muutama sata tavua tekstiä binäärisen kuvatiedoston sijaan, se skaalautuu mihin tahansa kokoon pikselöitymättä, koska se piirretään reunuksilla ja muunnoksilla, ja sen väriä voi vaihtaa hetkessä yhdellä CSS-muuttujalla ilman uuden kuvan viemistä.

Nämä neljä tyyliä — spinner, pisteet, syke, palkki — ovat myös niitä, jotka esiintyvät useimmin oikeissa käyttöliittymissä painikkeiden latautumistiloista koko sivun peittäviin ylityksiin. Kukin käyttää keyframes-lohkossaan vain transform- ja opacity-muutoksia, joita selaimet voivat animoida sulavasti GPU:lla häiritsemättä muun sivun toimintaa.

Tyylin valinta tilanteen mukaan

Pyörivä rengas: neutraalein, yleiskäyttöisin valinta — toimii hyvin painikkeiden sisällä ja pienissä inline-latausindikaattoreissa.
Pomppivat pisteet: näyttää kevyemmältä ja leikkisämmältä; yleinen chat-sovellusten "kirjoittaa..."-ilmaisimissa ja lyhyissä odotuksissa.
Sykkivä ympyrä: sopii yksittäisen elementin latausindikaattoriksi tai "aktiivinen/live"-tilapisteeksi.
Edistymispalkki: viittaa etenemiseen ja sitä odotetaan usein sivunlatauksissa tai monivaiheisissa prosesseissa, vaikka tarkkaa prosenttilukua ei näytettäisikään.

Lataajan käyttäminen projektissasi

Liitä luotu CSS tyylitiedostoosi kerran, ja käytä sitten HTML-katkelmaa uudelleen aina kun tarvitset latausindikaattorin — painikkeen sisällä lomaketta lähetettäessä, kortin päällä tietoja haettaessa tai keskitettynä koko sivun peittävässä ylityksessä. Koska animaatio on puhdasta CSS:ää, sen päälle ja pois kytkeminen on yhtä yksinkertaista kuin elementin lisääminen tai poistaminen DOM:ista, tai sen piilottaminen display: none -säännöllä.

→ Box Shadow -generaattori · CSS-minifioija

Usein kysytyt kysymykset

Toimivatko nämä lataajat ilman JavaScriptiä?

Kyllä — jokainen lataaja tässä on animoitu puhtaasti CSS:n @keyframes-säännöllä ja animation-ominaisuudella. JavaScriptiä tarvitaan vain, jos haluat näyttää tai piilottaa lataajan tapahtuman perusteella, kuten lomakkeen lähetyksen tai fetch-pyynnön valmistumisen yhteydessä.

Miksi luotu CSS sisältää @keyframes-lohkon?

CSS-animaatiot tarvitsevat kaksi osaa: elementin peruskielet (koko, väri, muoto) ja @keyframes-säännön, joka kuvaa miten nämä tyylit muuttuvat animaation keston aikana. Molempia tarvitaan animaation toimimiseksi, joten työkalu luo aina täydellisen parin pelkän perustyylin sijaan.

Voinko käyttää useampaa lataajatyyliä samalla sivulla?

Kyllä. Jokainen tyyli luo omat, yksilöllisesti nimetyt CSS-luokkansa ja keyframes-määrittelynsä (esimerkiksi css-loader-spinner ja css-loader-dots), joten voit kopioida useita tyylejä samaan tyylitiedostoon ilman että ne ovat ristiriidassa keskenään.

Hidastaako lataajan animaatio sivuani?

Ei — kaikki neljä tyyliä animoivat vain transform- ja opacity-ominaisuuksia, joita selaimet voivat käsitellä kompositointi- eli GPU-tasolla ilman asettelun uudelleenlaskentaa. Tämä pitää ne sulavina myös heikkotehoisemmilla laitteilla, toisin kuin esimerkiksi width- tai top-ominaisuuksien suora animointi.

Miten muutan lataajan väriä myöhemmin generoimatta sitä uudelleen?

Avaa kopioitu CSS ja muuta väriarvoa suoraan — se esiintyy kerran (border-top-color-, background- tai vastaavana ominaisuutena tyylistä riippuen) sen sijaan että olisi toistettu ympäri sääntöä, joten yksi etsi ja korvaa -toiminto päivittää sen kaikkialle.