CSS-loadergenerator
De CSS loader generator maakt laadanimaties in pure CSS in zes stijlen (spinner, stuiterende bolletjes, ring, pulse, balken en dubbele ring) met instelbare grootte, kleur, snelheid en dikte, en geeft zowel CSS als HTML.
Over deze tool
De CSS loader generator maakt laadanimaties in pure CSS in zes stijlen (spinner, stuiterende bolletjes, ring, pulse, balken en dubbele ring) met instelbare grootte, kleur, snelheid en dikte, en geeft zowel CSS als HTML.
Zo gebruik je het
- Kies een loaderstijl.
- Pas grootte, kleur, snelheid en dikte aan.
- Bekijk de live preview.
- Klik op Copy CSS + HTML en plak beide in je pagina.
Goed om te weten
- Loaders in pure CSS hebben geen afbeeldingen, GIF's of JavaScript nodig.
- Spinners draaien met @keyframes en transform: rotate(), wat efficiënt te animeren is.
- De markup is één element, of een paar child-elementen voor bolletjes en balken.
- Voeg role="status" en een visueel verborgen label zoals “Loading…” toe, zodat schermlezers de loader aankondigen.
- Overweeg loaders te vertragen of te pauzeren bij prefers-reduced-motion.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Hoe maak ik een laadspinner in CSS?
Geef een vierkant element een rand met één gekleurde zijde, border-radius: 50% en een draaiende @keyframes-animatie, of kopieer er een uit deze generator.
Zijn CSS-loaders beter dan GIF's?
Meestal wel: ze zijn kleiner, blijven scherp op elk formaat en je kunt kleur en snelheid aanpassen met CSS.
Hoe maak ik een loader toegankelijk?
Zet hem in een element met role="status" en voeg verborgen tekst toe zoals “Loading…”, zodat hulptechnologie hem kan aankondigen.
Hoe centreer ik de loader op de pagina?
Plaats hem in een container met display: flex; justify-content: center; align-items: center;.