Naar inhoud
FFrosthaven Lab

13 — 10 varianten

Loaders & transities

Preloaders, curtain-transities, skeletons, progress bars en blur-up images. De momenten waarop de site niets te tonen heeft.

Preloader met teller

jsintro

0

De pagina eronder

Telt naar 100 en schuift dan omhoog weg. Alleen doen als er echt iets zwaars laadt; een kunstmatige wachttijd van twee seconden kost je bezoekers.

Curtain-transitie

jsroute

Kolommen schuiven over het scherm bij navigatie. In Next.js hang je dit aan de route-wissel; houd het onder 600ms, anders voelt de site traag.

Skeleton shimmer

cssperceptie

Grijze vlakken in de vorm van de echte content. Voelt sneller dan een spinner omdat de bezoeker de layout al ziet. Vormen moeten wel kloppen met het resultaat.

Bovenbalk

cssroute

route-wissel indicator

Dunne balk bovenaan tijdens het laden van een route. De goedkoopste manier om een site responsief te laten voelen; drie pixels hoog is genoeg.

Ronde voortgang

svg
0%

Cirkel die vult via stroke-dashoffset. Voor uploads of een meerstapsproces waar je het percentage echt weet. Zonder echt percentage: gebruik een spinner.

Spinners

css

Drie basisvormen: ring, dots en balken. Gebruik ze alleen als de wachttijd onbekend is; bij bekende duur is een voortgangsbalk altijd beter.

Meerstapsloader

jsform
  • Aanvraag ontvangen
  • Beschikbaarheid controleren
  • Bevestiging versturen

Toont wat er gebeurt in plaats van alleen dát er iets gebeurt. Voor boekingen en betalingen: mensen wachten langer als ze zien wat er wordt afgehandeld.

Logo-draw

svgintro

Het merkteken tekent zichzelf. Mooie preloader als de klant een lijnlogo heeft; met een vlakkenlogo werkt het niet.

Blur-up beeld

perflcp

Vervaagde miniatuur eerst, scherpe foto erover. In Next.js krijg je dit gratis met placeholder='blur' op een lokale import; bij remote images moet je blurDataURL zelf leveren.

Lege staat

ux

Geen panden gevonden

Probeer een ruimere zoekopdracht.

Wat je toont als er geen resultaten zijn. Vaak vergeten en daardoor het lelijkste scherm van de site. Altijd een uitweg bieden, geen doodlopend bericht.