CSS-loader-generator
Gratis CSS-loader-generator: ti loaderspinners i ren CSS med live styring af størrelse, hastighed, tykkelse og farve samt klar HTML og CSS til kopiering.
Hvad laver CSS-loader-generatoren?
Den bygger animerede indlæsningsindikatorer i ren CSS: spinner, prikker, bjælker, kælvning, puls, kredsende, vending, bølge, hop og gradientring. Hver loader genereres med din valgte størrelse, hastighed, tykkelse og farve, klar til at kopieres som HTML plus CSS.
Kræver loaderne JavaScript eller billeder?
Nej. Hver loader består af almindelige HTML-elementer animeret med CSS-keyframes. Ingen billeder, ikonfonte, biblioteker eller runtime-scripts — CSS-blokken alene er nok.
Hvordan tilføjer jeg en loader til mit site?
Klik på en loader i gitteret, indsæt HTML-blokken der, hvor den skal vises, og indsæt CSS-blokken i dit stylesheet. CSS-en er selvstændig og indeholder de nødvendige @keyframes-regler.
Hvad ændrer de fire parametre?
Størrelse styrer bredde og højde på alle loaders, hastighed ændrer animationstiden, tykkelse påvirker kanter og bjælkebredder, og farven maler alle elementer i gitter og kode om med det samme.
Hvorfor animerer min kopierede loader ikke?
Hyppigste årsag er, at kun klassereglerne blev kopieret uden @keyframes-blokken, eller at klassen blev omdøbt i HTML men ikke i CSS. Kopiér begge blokke som genereret og behold klassenavnene.
Er animationerne performante?
Ja. Alle loaders animerer kun transform og opacity — egenskaber som browseren komponerer på GPU uden at udløse layout eller maling, så det forbliver flydende selv med flere loaders pr. side.
Er loaderne tilgængelige?
Spinners er visuel dekoration; skærmlæsere har gavn af et teksthint. Tilføj en skjult label som "Indlæser" ved siden af loaderen, eller sæt aria-hidden="true" på loaderen og meld fremskridt separat.
Sendes data til en server?
Nej. Generatoren kører helt i din browser. Dine indstillinger forlader aldrig siden, og den genererede kode samles lokalt på din enhed.
Sådan bruges CSS-loader-generator
CSS-loader-generatoren bygger animerede indlæsningsindikatorer i ren CSS — ingen billeder, ingen JavaScript, ingen afhængigheder. Vælg en af ti stilarter, justér størrelse, hastighed, tykkelse og farve, og kopier derefter den genererede HTML og CSS direkte ind i dit projekt.
- Indstil de globale parametre med de fire kontroller: Størrelse sætter boksen på hver loader, Hastighed ændrer animationens varighed, Tykkelse styrer kanter og bjælkebredder, og Farve maler hvert element.
- Gennemse gitteret: alle ti loadere forbliver levende animerede med dine nuværende indstillinger, så du sammenligner dem i ét blik. Klik på en loader for at vælge den.
- Detaljepanelet viser den valgte loader større, sammen med HTML-uddraget og matchende CSS (inklusive de @keyframes, den behøver).
- Tryk på Kopiér HTML eller Kopiér CSS for at sende hver blok til udklipsholderen. CSS'en er selvstændig — indsæt den i dit stylesheet og placér HTML'en, hvor loaderen skal dukke op.
- Skift en hvilken som helst parameter, og gitteret, detaljeforhåndsvisningen og begge kodeblokke opdateres med det samme.
Da loaderne er ren CSS, koster de næsten ingen båndbredde og forbliver skarpe på enhver skærm. Kombinér animationen med en tekstetiket for tilgængelighed, og undgå varigheder under ca. 0,5 s — spinnere, der blinker for hurtigt, uroer mere, end de beroliger.
Relaterede værktøjer
- CSS-minifierer Gratis online CSS-minifierer. Komprimer og optimer CSS-kode øjeblikkeligt ved at fjerne mellemrum, kommentarer og unødvendige tegn. Reducer filstørrelsen for hurtigere web-ydelse.
- CSS-forskønner Formatér og forskøn CSS-kode øjeblikkeligt. Konverter minifieret CSS til læsbar kode med justerbare muligheder.
- Border-radius Generator Gratis kreativ border-radius-generator online. Træk i 8 håndtag eller vælg en blob-forudindstilling for at skabe organiske CSS-former og kopiere koden med det samme.
- Farvekonverter Gratis online farvekonverter. Konverter HEX, RGB, HSL, HSV formater øjeblikkeligt med visuel vælger. 100% privat, kører i din browser.
- CSS Easing-generator Gratis online CSS easing-generator. Træk cubic-bezier-kontrollpunkterne på en interaktiv kurve, vælg mellem 18 forudindstillinger, se en loopende boldanimation og kopiér tidsfunktionen med det samme.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabl flere skyggelag med forskydning, sløring, farve og gennemsigtighed, prøv forudindstillinger som Neon, 3D, Retro og kopier CSS-koden med det samme.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Design polygon-, cirkel-, ellipse- og inset-former med trkbare punkter, live forhåndsvisning og CSS-kode med ét klik.
- CSS Border Radius Generator Visuel CSS border-radius generator. Juster hvert hjørne uafhængigt med realtidsforhåndsvisning og kopier CSS-koden med det samme.