CSS-latausindikaattorit
Ilmainen CSS-indikaattorigeneraattori: kymmenen latausspinneriä puhtaalla CSS:llä ja suoralla koon, nopeuden, paksuuden ja värin säädöllä sekä valmis HTML ja CSS kopioitavaksi.
Mitä CSS-indikaattorigeneraattori luo?
Se rakentaa animoituja latausindikaattoreita puhtaalla CSS:llä: pyörä, pisteet, palkit, aaltoilu, pulssi, rata, kääntö, aalto, pomppu ja liukuväriympyrä. Jokainen luodaan valitsemallasi koolla, nopeudella, paksuudella ja värillä, valmiina kopioitavaksi HTML plus CSS -muodossa.
Tarvitsevatko indikaattorit JavaScriptiä tai kuvia?
Eivät. Jokainen indikaattori on tavallisia HTML-elementtejä, jotka animoidaan CSS-keyframesilla. Ei kuvia, ikonifontteja, kirjastoja eikä ajonaikaisia skriptejä — pelkkä CSS-lohko riittää.
Miten lisään indikaattorin sivustolleni?
Napsauta indikaattoria ruudukossa, liitä HTML-lohko siihen kohtaan, missä sen kuuluu näkyä, ja liitä CSS-lohko tyylisivuusi. CSS on itsenäinen ja sisältää tarvittavat @keyframes-säännöt.
Mitä neljä parametria muuttavat?
Koko määrittää kaikkien indikaattorien leveyden ja korkeuden, nopeus muuttaa animaation kestoa, paksuus vaikuttaa reunuksiin ja palkkien leveyteen, ja väri maalaa kaikki elementit ruudukossa ja koodissa heti uudelleen.
Miksi kopioimani indikaattori ei liiku?
Yleisin syy on, että kopioitiin vain luokkasäännöt ilman @keyframes-lohkoa, tai luokka nimettiin uudelleen HTML:ssä mutta ei CSS:ssä. Kopioi molemmat lohkot sellaisinaan ja säilytä luokkien nimet.
Ovatko animaatiot suorituskykyisiä?
Kyllä. Kaikki indikaattorit animoivat vain transformia ja opasiteettia — ominaisuuksia, jotka selain kokoaa GPU:lla ilman layout- tai maalauslaukaisuja, joten sujuvuus säilyy useallakin indikaattorilla sivulla.
Ovatko indikaattorit saavutettavia?
Spinnerit ovat visuaalista koristetta, joten ruudunlukijat hyötyvät tekstivihjeestä. Lisää piilotettu tekstimerkintä kuten "Ladataan" indikaattorin viereen, tai aseta indikaattorille aria-hidden="true" ja ilmoita edistyminen erikseen.
Lähetetäänkö tietoja palvelimelle?
Ei. Generaattori toimii täysin selaimessasi. Asetuksesi eivät koskaan lähde sivulta, ja luotu koodi kootaan paikallisesti laitteellasi.
Näin käytät työkalua CSS-latausindikaattorit
CSS-loader-generaattori rakentaa animoituja latausindikaattoreita puhtaalla CSS:llä — ei kuvia, ei JavaScriptiä, ei riippuvuuksia. Valitse yksi kymmenestä tyylistä, säädä koko, nopeus, paksuus ja väri, ja kopioi tuotettu HTML ja CSS suoraan projektiisi.
- Säädä yleiset parametrit neljällä ohjaimella: Koko asettaa jokaisen loaderin kehyksen, Nopeus muuttaa animaation kestoa, Paksuus ohjaa reunuksia ja palkkien leveyksiä, ja Väri maalaa jokaisen elementin.
- Selaa ruudukkoa: kaikki kymmenen loaderia pysyvät elävinä nykyisillä asetuksillasi, joten vertaat niitä yhdellä silmäyksellä. Napsauta mitä tahansa loaderia valitaksesi sen.
- Yksityiskohtapaneeli näyttää valitun loaderin suurempana yhdessä sen HTML-pätkän ja vastaavan CSS:n (mukaan lukien tarvittavat @keyframes).
- Paina Kopioi HTML tai Kopioi CSS viedäksesi kummankin lohkon leikepöydälle. CSS on itsenäinen — liitä se tyylisivullesi ja aseta HTML sinne, missä loaderin pitää ilmestyä.
- Muuta mitä tahansa parametria, ja ruudukko, yksityiskohtaesikatselu ja molemmat koodilohkot päivittyvät heti.
Koska loaderit ovat puhdasta CSS:ää, ne kuluttavat lähes nolla kaistanleveyttä ja pysyvät terävinä millä tahansa näytöllä. Yhdistä animaatio tekstilabeliin saavutettavuuden vuoksi ja vältä kestoja noin 0,5 sekunnin alapuolella — liian nopeasti välkkyvät spinnerit huolestuttavat enemmän kuin rauhoittavat.
Aiheeseen liittyvät työkalut
- CSS-minifioija Ilmainen online CSS-minifioija. Pakkaa ja optimoi CSS-koodi välittömästi poistamalla välilyönnit, kommentit ja tarpeettomat merkit. Pienennä tiedostokokoa nopeampaa web-suorituskykyä varten.
- CSS-kaunistaja Muotoile ja kaunista CSS-koodi välittömästi. Muunna minifioitu CSS luettavaksi koodiksi muokattavilla vaihtoehdoilla.
- Border-radius Generaattori Ilmainen luova border-radius-generaattori verkossa. Raahaa 8 kahvaa tai valitse blob-pohja luodaksesi orgaanisia CSS-muotoja ja kopioidaksesi koodin heti.
- Värimuunnin Ilmainen online-värimuunnin. Muunna HEX, RGB, HSL, HSV muodot välittömästi visuaalisella valitsimella. 100% yksityinen, toimii selaimessasi.
- CSS easing generaattori Ilmainen online CSS easing generaattori. Raahaa cubic-bezier-ohjauspisteitä interaktiivisella käyrällä, valitse 18 esiasetuksen joukosta, katso jatkuvaa pallon animaatiota ja kopioi ajoitusfunktio heti.
- CSS tekstivarjo generaattori Ilmainen online tekstivarjogeneraattori. Pinoa useita varjokerroksia siirrolla, sumennuksella, värillä ja peittävyydellä, kokeile Neon-, 3D- ja Retro-esiasetuksia ja kopioi CSS heti.
- CSS clip-path generaattori Ilmainen online CSS clip-path generaattori. Suunnittele polygon-, circle-, ellipse- ja inset-muodot raahattavilla pisteillä, live-esikatselulla ja CSS-koodin kopioinnilla yhdellä klikkauksella.
- CSS Border Radius Generaattori Visuaalinen CSS border-radius generaattori. Säädä jokaista kulmaa itsenäisesti reaaliaikaisella esikatselulla ja kopioi CSS-koodi välittömästi.