CSS Loader Generator
Genereer direct pure CSS-laadanimaties. Kies spinner, stippen, balken of puls — kopieer de CSS en HTML en gebruik ze in elk project.
① Kies een loader-type ② Pas grootte, kleur en snelheid aan ③ Kopieer CSS en HTML
Kleur
#C9B89A
Snelheid
Hoe het werkt
Elke loader is gebouwd met alleen CSS-animaties — geen JavaScript of afbeeldingen. De spinner gebruikt border-rotatie, stippen gebruiken schaal-bounce, balken gebruiken scaleY, en puls gebruikt schaal met opacity.
Snelheidsregeling
Langzaam = 1,5s, Normaal = 0,8s, Snel = 0,4s animatieduur. Stippen en balken gebruiken animation-delay op kindelementen voor het gespreide effect.
Direct inzetbaar
Kopieer beide CSS- en HTML-fragmenten, plak ze in je project en de loader werkt meteen. Geen afhankelijkheden, geen frameworks nodig.
CSS-uitvoer
.loader {
width: 48px;
height: 48px;
border: 6px solid #c9b89a33;
border-top-color: #c9b89a;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
HTML-uitvoer<div class="loader"></div>
Wat is een CSS-laadanimatie?
Een CSS-laadanimatie — ook wel CSS-spinner of CSS-loader genoemd — is een UI-patroon dat wachtende gegevens aangeeft zonder JavaScript of GIF-afbeeldingen. Modern CSS maakt complexe animaties mogelijk met @keyframes en de eigenschappen transform, opacity en border. Veelvoorkomende patronen zijn spinners (roterende rand), stippen (stuiterende cirkels), balken (geschaalde rechthoeken) en puls (ademende cirkel).
Veelgestelde vragen
Een CSS-loader is een puur visuele laadindicator gebouwd met CSS-animaties en @keyframes — geen JavaScript of afbeeldingen nodig. Het geeft gebruikers aan dat inhoud wordt geladen.
De spinner gebruikt een cirkelvormig element met een transparante rand behalve een gekleurde zijde. Een @keyframes-animatie rotate(360deg) draait het element continu.
De stippenloader toont drie cirkels die achtereenvolgens schalen met de scale()-transformatie, wat een stuitereffect creert. De balkenloader toont vier rechthoeken die verticaal schalen met scaleY().
Bij stippen en balken heeft elk kindelement een andere animation-delay waarde. Dit betekent dat elk element zijn animatiecyclus op een ander moment start, wat het cascade-effect creert.
CSS-animaties met transform en opacity zijn GPU-versneld in alle moderne browsers. Vermijd het animeren van eigenschappen zoals width en height die layout-reflow veroorzaken.
Wikkel de loader in een container met display:flex; justify-content:center; align-items:center; Voor een overlay over de hele pagina, voeg position:fixed; inset:0 toe.
CSS @keyframes-animaties worden ondersteund in alle moderne browsers (Chrome, Firefox, Safari, Edge) sinds 2013.