Zo bouw je een page loader in Webflow
Op veel websites zie je tegenwoordig een page loader, ook wel een "spinner" of "loading indicator" genoemd. Deze loaders kunnen worden gebruikt om vertraging te verbergen die ontstaat door het laden van grote of complexe assets, zoals afbeeldingen of scripts, om zo de visuele prestaties van een website te verbeteren. Tegenwoordig wordt het ook veel gebruikt om een website een extra beleving te geven.
In deze stap voor stap tutorial leggen wij uit hoe je in Webflow zo'n page-loader kan maken met Webflow Interacties.
Stap 1 - project openen
In Webflow, open een project of maak een nieuwe aan.
Stap 2 - page loader div
Maak in de Body een div aan en noem deze page-loader
Stap 3 - aanmaken div
Shortcut CMD + E (of CTRL + E) en type div en druk enter
Stap 4 - content div
Geef deze div een class: page-loader_content.
Zet Display op flex, align op center en justify op center
Zet de width en height op 100%
Zet Position op relative en de z-index op 1
Stap 5 - achtergrond opmaken
Voeg nog een div toe in page-loader genaamd page-loader_bg. Dit wordt de achtergrond animatie. Volg de instellingen in de screenshot, én geef een background-color (vervang transparant) mee naar keuze.
Stap 6 - content toevoegen
Voeg de volgende twee elementen toe: een div en een image. Geef ze de classnames page-loader_image-wrapper en page-loader_image.
Vervang de afbeelding door je eigen logo.
Stap 7 - interactie aanmaken
Ga naar Interactions of druk op 'H'.
Stap 8 - interactie aanmaken
Klik op het plusje om een nieuwe animatie toe te voegen.
Stap 9 - background animatie
Klik op de class page-loader_bg en vervolgens op het plusje om een animatie toe te voegen. Klik op 'Size'
Stap 10 - background animatie initial state
Stel de waardes in zoals in het voorbeeld.
Stap 11 - background animatie state
Stel de waardes in zoals in het voorbeeld.
Stap 12
Selecteer de page-loader_image-wrapper en voeg de opacity interactie toe zoals afgebeeld.
Stap 13 - logo animatie
Stel de waardes in zoals in het voorbeeld.
Stap 14 - logo animatie
Stel de waardes in zoals in het voorbeeld.
Stap 15 - show and hide
Selecteer de page-wrapper en voeg de Hide/Show interactie toe. Stel de waardes in zoals in het voorbeeld.
Stap 16 - show and hide
Stel de waardes in zoals in het voorbeeld.
Stap 17
Preview je animatie.
Stap 18
Maak een global component aan om het makkelijk aan andere pagina's toe te voegen
Stap 19
Voeg de component toe op andere pagina's
Stap 20
Ga naar interactions en voeg de page-loader interactie toe.
Stap 21
Klik op Edit Component en zet de page-loader op Display: none.
Stap 22 - publiceren!
En klaar is kees. Woohoo!
Heb je vragen of een suggestie?
We gaan er mee aan de slag.
