CSS Loader Generator

Wat is deze tool?

Een CSS-loader is een klein geanimeerd element — een draaiende ring, stuiterende stippen, een pulserende cirkel of een bewegende voortgangsbalk — dat aangeeft dat content aan het laden is, zonder JavaScript-animatielus en zonder afbeelding of GIF. Het wordt opgebouwd uit een paar CSS-regels plus een @keyframes-blok dat bepaalt hoe het element in de tijd beweegt.

Deze tool genereert vier gangbare loaderpatronen met echte, werkende CSS: een roterende spinner op basis van randen, drie stippen die na elkaar stuiteren, een cirkel die naar binnen en buiten pulseert, en een balk met een schuivende vulling. Pas grootte, kleur en animatieduur aan op het live voorbeeld, en kopieer daarna de gegenereerde CSS en de minimale HTML waarop deze van toepassing is.

Bron: CSS Animations Level 1, W3C — de specificatie die @keyframes en de animatie-eigenschappen definieert waarop deze loaders zijn gebouwd.

Waarom gebruiken?

• Live voorbeeld animeert realtime terwijl je stijl, grootte, kleur of snelheid aanpast — zie precies wat je gaat gebruiken.
• Genereert de complete CSS inclusief het @keyframes-blok, niet alleen een fragment dat je zelf moet afmaken.
• Levert ook de exacte HTML-markup die de CSS verwacht, dus geen giswerk over klassennamen of elementstructuur.
• Vier verschillende animatiepatronen (spinner, stippen, puls, balk) dekken de meest voorkomende laadstatustoepassingen.
• Pure CSS-animatie — geen JavaScript, geen afbeeldingsbestanden, kleiner en vloeiender dan een geanimeerde GIF.
• Draait volledig in je browser, gratis, geen aanmelding.

Hoe te gebruiken

1. Kies een loaderstijl: draaiende ring, stuiterende stippen, pulserende cirkel of voortgangsbalk.
2. Sleep de grootteschuif om de loader groter of kleiner te maken.
3. Kies een kleur — dit wordt de accentkleur van de loader (de draaiende rand, de stippen of de balkvulling).
4. Pas de snelheid aan om de animatie sneller of langzamer te maken; de meeste UI-loaders werken het best tussen 0,6s en 1,5s per cyclus.
5. Kopieer de gegenereerde CSS naar je stylesheet en plak het HTML-fragment waar je de loader nodig hebt.

Voorbeeld

Invoer

Stijl: draaiende ring · Grootte: 40px · Kleur: oranje · Snelheid: 1.0s

Uitvoer

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

Een klassieke ringspinner: een cirkel met een min-of-meer transparante rand aan drie zijden en een effen kleur aan de vierde, continu geroteerd met een lineaire, oneindige animatie.

Waarom CSS-loaders in plaats van geanimeerde GIF's

Geanimeerde GIF-spinners waren jarenlang de standaard, maar een CSS-loader is tegenwoordig vrijwel altijd de betere keuze: het is een paar honderd bytes tekst in plaats van een binair afbeeldingsbestand, het schaalt naar elke grootte zonder pixelvorming omdat het met randen en transforms getekend wordt, en de kleur kan direct worden aangepast met één CSS-variabele in plaats van een nieuwe afbeelding te exporteren.

De vier stijlen hier — spinner, stippen, puls, balk — zijn ook degene die het vaakst voorkomen in echte interfaces, van laadstatussen in knoppen tot volledige-paginaoverlays. Elke stijl gebruikt alleen wijzigingen in transform en opacity in de keyframes, die browsers vloeiend op de GPU kunnen animeren zonder de rest van de pagina te haperen.

Een stijl kiezen voor de situatie

• Draaiende ring: de meest neutrale, algemeen bruikbare keuze — werkt goed binnen knoppen en kleine inline laadstatussen.
• Stuiterende stippen: oogt lichter en speelser; gangbaar voor 'aan het typen...'-indicators in chats en korte wachttijden.
• Pulserende cirkel: geschikt als losstaande laadindicator of als 'actief/live'-statuspunt.
• Voortgangsbalk: suggereert voorwaartse beweging en wordt vaak verwacht bij paginaladen of meerstapsprocessen, ook zonder exact percentage.

De loader gebruiken in je project

Plak de gegenereerde CSS eenmalig in je stylesheet en hergebruik daarna het HTML-fragment overal waar je een laadstatus nodig hebt — in een knop terwijl een formulier verzonden wordt, over een kaart terwijl gegevens worden opgehaald, of gecentreerd in een volledige-paginaoverlay. Omdat de animatie pure CSS is, is hem aan- en uitzetten zo simpel als het element toevoegen aan of verwijderen uit de DOM, of hem verbergen met display: none.

→ Box Shadow Generator · CSS Minifier

Veelgestelde vragen