CSS-loader-generator
Gratis CSS-loader-generator: ti lastespinners i ren CSS med live kontroll av størrelse, hastighet, tykkelse og farge, og klar HTML og CSS å kopiere.
Hva lager CSS-loader-generatoren?
Den bygger animerte lasteindikatorer i ren CSS: spinner, prikker, stolper, bølgering, puls, bane, vending, bølge, sprett og gradientring. Hver loader genereres med valgt størrelse, hastighet, tykkelse og farge, klar til å kopieres som HTML pluss CSS.
Trenger loaderne JavaScript eller bilder?
Nei. Hver loader består av vanlige HTML-elementer animert med CSS-keyframes. Ingen bilder, ikonfonter, biblioteker eller kjøretidsskript — CSS-blokken alene er nok.
Hvordan legger jeg til en loader på nettstedet mitt?
Klikk en loader i rutenettet, lim inn HTML-blokken der den skal vises, og lim inn CSS-blokken i stilarket ditt. CSS-en er selvstendig og inneholder de nødvendige @keyframes-reglene.
Hva endrer de fire parameterne?
Størrelse styrer bredde og høyde på alle loadere, hastighet endrer animasjonsvarigheten, tykkelse påvirker kantlinjer og stolpebredder, og farge maler alle elementer i rutenett og kode om med én gang.
Hvorfor animerer ikke den kopierte loaderen min?
Vanligste årsak er at bare klassereglene ble kopiert uten @keyframes-blokken, eller at klassen ble omdøpt i HTML men ikke i CSS. Kopier begge blokkene som generert og behold klassenavnene.
Er animasjonene ytelseseffektive?
Ja. Alle loadere animerer bare transform og opacity — egenskaper nettleseren komponerer på GPU uten å utløse layout eller maling, så det forblir flytende selv med flere loadere per side.
Er loaderne tilgjengelige?
Spinners er visuell dekorasjon; skjermlesere gagner på en teksthint. Legg til en skjult etikett som «Laster» ved loaderen, eller sett aria-hidden="true" på loaderen og meld fremdrift separat.
Sendes data til en server?
Nei. Generatoren kjører helt i nettleseren din. Innstillingene dine forlater aldri siden, og den genererte koden settes sammen lokalt på enheten din.
Slik bruker du CSS-loader-generator
CSS-loader-generatoren bygger animerte lasteindikatorer i ren CSS — ingen bilder, ingen JavaScript, ingen avhengigheter. Velg en av ti stiler, juster størrelse, hastighet, tykkelse og farge, og kopier deretter den genererte HTML-en og CSS-en rett inn i prosjektet ditt.
- Still inn de globale parametrene med de fire kontrollene: Størrelse setter boksen til hver loader, Hastighet endrer animasjonslengden, Tykkelse styrer rammer og linjebredder, og Farge maler hvert element.
- Bla gjennom rutenettet: alle ti loaderne forblir levende animert med de nåværende innstillingene dine, slik at du sammenligner dem i ett blikk. Klikk på en loader for å velge den.
- Detaljpanelet viser den valgte loaderen større, sammen med HTML-utdraget og matchende CSS (inkludert @keyframes den trenger).
- Trykk Kopier HTML eller Kopier CSS for å sende hver blokk til utklippstavlen. CSS-en er selvforsynende — lim den inn i stilarket ditt og plasser HTML-en der lasteren skal dukke opp.
- Endre en parameter, og rutenettet, detaljforhåndsvisningen og begge kodeblokkene oppdateres umiddelbart.
Siden lasterne er ren CSS, koster de nesten ingen båndbredde og forblir skarpe på alle skjermer. Kombiner animasjonen med en tekstetikett for tilgjengelighet, og unngå varigheter under omtrent 0,5 s — spinnere som blinker for fort uroer mer enn de beroliger.
Relaterte verktøy
- CSS-minifierer Gratis online CSS-minifierer. Komprimer og optimaliser CSS-kode umiddelbart ved å fjerne mellomrom, kommentarer og unødvendige tegn. Reduser filstørrelsen for raskere webytelse.
- CSS-forskønner Formater og forskjønn CSS-kode umiddelbart. Konverter minifisert CSS til lesbar kode med tilpassbare alternativer.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 håndtak eller velg en blob-forhåndsinnstilling for å lage organiske CSS-former og kopiere koden umiddelbart.
- Fargekonverterer Gratis online fargekonverterer. Konverter HEX, RGB, HSL, HSV formater umiddelbart med visuell velger. 100% privat, kjører i nettleseren din.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunktene på en interaktiv kurve, velg blant 18 forhåndsinnstillinger, se en loope ballanimasjon og kopier tidsfunksjonen med en gang.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabble flere skyggelag med forskyvning, uskarphet, farge og gjennomsiktighet, prøv forhåndsinnstillinger som Neon, 3D, Retro og kopier CSS-koden med en gang.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Formgi polygon-, sirkel-, ellipse- og insett-former med flyttbare punkter, forhåndsvisning og CSS-kode med ett klikk.
- CSS Border Radius Generator Visuell CSS border-radius generator. Juster hvert hjørne uavhengig med sanntidsforhåndsvisning og kopier CSS-koden umiddelbart.