Ga naar hoofdinhoud

Loader

Standard component:

Voorbeeld HTML
Open in nieuwe tab

Loader met status:

Het laden duurt iets langer dan verwacht

Voorbeeld HTML
Open in nieuwe tab

Loader Overlay

Voorbeeld HTML
Open in nieuwe tab

Loader met acties:

Voorbeeld HTML
Open in nieuwe tab

Loader met status en acties

Het laden duurt iets langer dan verwacht

Voorbeeld HTML
Open in nieuwe tab

Documentatie

De Loader kan men gebruiken om een tijdelijk laadscherm te tonen als het ophalen van de informatie een korte tijd bedraagd, of het laden van een pagina. Standaard is de loader leeg met alleen een draaiend icoon. Als je de loader over de gehele pagina wil laden vallen, of over een specieke div, maak dan gebruik van overlay. De Loader zal binnen het element vallen als position: relative; wordt gebruikt.

Als na enige tijd het laden nog te lang duurt, kun je een status bericht tonen of twee action buttons tonen. Dit zijn allemaal optionele parameters.

  • Toon altijd een 'loader' bij belangrijke 'verzend'-momenten.
  • Informeer de gebruiker tijdens het tonen van de 'loader' wat er gebeurt.
  • Duurt het laden langer dan 30 seconden laat dan een foutmelding zien en een knop om het opnieuw te proberen.