CSS-loadergenerator

Hoe de gegenereerde CSS werkt

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

De spinner is een cirkel die met een dikke rand wordt getekend. De regel border-top-color kleurt alleen de bovenkant van de ring met de accentkleur, zodat de ring als een boog leest, en de regel @keyframes spin draait hem om zijn middelpunt. Draaien met transform: rotate() houdt de animatie goedkoop, omdat de browser het element op de compositor beweegt in plaats van het beeld voor beeld opnieuw te tekenen.

Om hem op een pagina te tonen, voeg je één element toe en laad je de CSS:

<div class="loader" role="status" aria-label="Laden"></div>

Maak hem toegankelijk

• Voeg role="status" toe, zodat schermlezers de spinner aankondigen.
• Zet aria-label met de statustekst, bijvoorbeeld “Laden”.
• Verberg inhoud niet langer dan een paar seconden achter een spinner zonder een fallback bij time-out.
• Respecteer prefers-reduced-motion. Vervang de draaianimatie voor gebruikers die hem uit hebben gezet door een eenvoudige fade of een statische tekst “Laden…”:

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

Wanneer een spinner gebruiken en wanneer een optimistische UI

• Reactie onder 100 ms: geen spinner nodig; het menselijk oog merkt de vertraging nauwelijks.
• 100 ms – 1 s: een subtiele spinner (klein cirkeltje, knoptekst “Laden…”) voorkomt dubbelklikken.
• 1 s – 10 s: een duidelijke spinner, bij voorkeur met voortgang als die meetbaar is.
• > 10 s: dit is geen spinnerprobleem; zoek uit wat traag is en los dat op.

Bij het versturen van formulieren en het klikken op knoppen is een spinner in de knop meestal beter dan een overlay over de hele pagina.