CSS-loader Generator
Gratis CSS-loader-generator: tio laddningsspinners i ren CSS med livekontroll av storlek, hastighet, tjocklek och färg, samt färdig HTML och CSS att kopiera.
Vad skapar CSS-loader-generatorn?
Den bygger animerade laddningsindikatorer i ren CSS: spinnare, prickar, staplar, rippel, puls, omloppsbana, vändning, våg, studs och gradientring. Varje loader skapas med din valda storlek, hastighet, tjocklek och färg, redo att kopieras som HTML plus CSS.
Behöver loaders JavaScript eller bilder?
Nej. Varje loader består av vanliga HTML-element som animeras med CSS-keyframes. Inga bilder, ingaikonfonter, inga bibliotek och inga runtime-skript — CSS-blocket ensamt räcker.
Hur lägger jag till en loader på min sajt?
Klicka på en loader i rutnätet, klistra in HTML-blocket där den ska visas och CSS-blocket i din stilmall. CSS:en är fristående och innehåller de nödvändiga @keyframes-reglerna.
Vad ändrar de fyra parametrarna?
Storlek styr bredd och höjd på alla loaders, hastighet ändrar animeringstiden, tjocklek påverkan ramarna och stapelbredderna, och färgen målar om alla element i rutnätet och koden direkt.
Varför animeras inte min kopierade loader?
Vanligaste orsaken är att bara klassreglerna kopierats utan @keyframes-blocket, eller att klassen bytt namn i HTML men inte i CSS. Kopiera båda blocken som de är och behåll klassnamnen.
Är animationerna prestandavänliga?
Ja. Alla loaders animerar endast transform och opacity — egenskaper som webbläsaren komponerar på GPU utan att utlösa layout eller måleri, så det förblir mjukt även med flera loaders per sida.
Är loaders tillgängliga?
Spinners är visuell dekoration; skärmläsare gynnas av en texthint. Lägg till en dold etikett som "Laddar" bredvid loadern, eller sätt aria-hidden="true" på loadern och meddela fortskridandet separat.
Skickas data till en server?
Nej. Generatorn körs helt i din webbläsare. Dina inställningar lämnar aldrig sidan och den genererade koden byggs lokalt på din enhet.
Hur man använder CSS-loader Generator
CSS-laddaregeneratorn bygger animerade laddningsindikatorer i ren CSS — inga bilder, inget JavaScript, inga beroenden. Välj en av tio stilar, ställ in storlek, hastighet, tjocklek och färg och kopiera sedan den genererade HTML:en och CSS:en rakt in i ditt projekt.
- Ställ in de globala parametrarna med de fyra kontrollerna: Storlek sätter rutan för varje laddare, Hastighet ändrar animeringens längd, Tjocklek styr ramar och stapelbredder, och Färg målar varje element.
- Bläddra i rutnätet: alla tio laddare förblir live-animerade med dina nuvarande inställningar så att du jämför dem i en ögonkastblick. Klicka på vilken laddare som helst för att välja den.
- Detaljpanelen visar den valda laddaren större, tillsammans med dess HTML-utdrag och motsvarande CSS (inklusive de @keyframes den behöver).
- Tryck Kopiera HTML eller Kopiera CSS för att skicka varje block till urklipp. CSS:en är självförsörjande — klistra in den i din stilmall och placera HTML:en där laddaren ska synas.
- Ändra vilken parameter som helst och rutnätet, detaljförhandsvisningen och båda kodblocken uppdateras omedelbart.
Eftersom laddarna är ren CSS kostar de nästan ingen bandbredd och förblir skarpa på vilken skärm som helst. Para animationen med en textetikett för tillgänglighet och undvik längder under ungefär 0,5 s — spinnare som blinkar för fort oroar mer än de lugnar.
Relaterade verktyg
- CSS-minifierare Gratis online CSS-minifierare. Komprimera och optimera CSS-kod omedelbart genom att ta bort mellanslag, kommentarer och onödiga tecken. Minska filstorleken för snabbare webbprestanda.
- CSS-förskönare Formatera och försköna CSS-kod direkt. Konvertera minifierad CSS till läsbar kod med anpassningsbara alternativ.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 handtag eller välj en blob-förinställning för att skapa organiska CSS-former och kopiera koden direkt.
- Färgkonverterare Gratis online färgkonverterare. Konvertera HEX, RGB, HSL, HSV format omedelbart med visuell väljare. 100% privat, körs i din webbläsare.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunkterna på en interaktiv kurva, välj bland 18 förinställningar, titta på en loopande bollanimation och kopiera tidsfunktionen direkt.
- CSS Textskugggenerator Gratis online textskugggenerator. Stapla flera skugglager med offset, oskärpa, färg och opacitet, prova förinställningar som Neon, 3D, Retro och kopiera CSS-koden direkt.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Formge polygon-, cirkel-, ellips- och inset-former med dragbara punkter, liveförhandsvisning och CSS-kod med ett klick.
- CSS Border Radius Generator Visuell CSS border-radius generator. Justera varje hörn oberoende med realtidsförhandsgranskning och kopiera CSS-koden omedelbart.