CSS Loader-generator
Generatorn skapar laddningsanimationer i ren CSS i sex stilar – spinner, studsande prickar, ring, puls, staplar och dubbelring – med justerbar storlek, färg, hastighet och tjocklek, och ger både CSS och HTML.
Om verktyget
Generatorn skapar laddningsanimationer i ren CSS i sex stilar – spinner, studsande prickar, ring, puls, staplar och dubbelring – med justerbar storlek, färg, hastighet och tjocklek, och ger både CSS och HTML.
Så använder du det
- Välj en stil för laddningsindikatorn.
- Justera storlek, färg, hastighet och tjocklek.
- Kolla förhandsvisningen.
- Klicka på Copy CSS + HTML och klistra in båda på din sida.
Bra att veta
- Laddningsindikatorer i ren CSS behöver inga bilder, GIF:ar eller JavaScript.
- Spinners roterar med @keyframes och transform: rotate(), vilket är effektivt att animera.
- Koden är ett enda element, eller några barnelement för prickar och staplar.
- Lägg till role="status" och en visuellt dold etikett som ”Loading…” så att skärmläsare läser upp indikatorn.
- Överväg att sakta ner eller pausa laddningsindikatorer vid prefers-reduced-motion.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Hur gör jag en laddningsspinner i CSS?
Ge ett kvadratiskt element en kant där en sida är färgad, border-radius: 50%, och en roterande @keyframes-animation – eller kopiera en från den här generatorn.
Är CSS-laddningsindikatorer bättre än GIF:ar?
Oftast ja: de är mindre, förblir skarpa i alla storlekar och deras färg och hastighet kan ändras med CSS.
Hur gör jag en laddningsindikator tillgänglig?
Lägg den i ett element med role="status" och ta med dold text som ”Loading…” så att hjälpmedel kan läsa upp den.
Hur centrerar jag laddningsindikatorn på sidan?
Placera den i en container med display: flex; justify-content: center; align-items: center;.