In dit artikel
Wat zijn CSS-loaders en waarom zijn ze belangrijk
CSS-loaders zijn lichtgewicht geanimeerde indicatoren die gebruikers laten weten dat er iets op de achtergrond gebeurt. Of een pagina nu gegevens ophaalt, een bestand verwerkt of wacht op een API-respons, een goed ontworpen loader voorkomt dat gebruikers denken dat de applicatie is vastgelopen.
In tegenstelling tot GIF- of JavaScript-gebaseerde spinners zijn pure CSS-loaders resolutie-onafhankelijk, minuscuul in bestandsgrootte en worden ze vloeiend weergegeven op elk apparaat. Ze vereisen geen externe afhankelijkheden en integreren direct in uw stylesheet, waardoor ze de voorkeurskeuze zijn voor moderne webapplicaties.
Hoe de CSS-loader-generator werkt
Met de generator kunt u visueel een laadanimatie aanpassen en direct de productieklare CSS-code kopiëren.
- Kies een loaderstijl — kies uit spinner, stippen, balken, pulse, ring en andere veelvoorkomende animatiepatronen die bij uw ontwerp passen
- Pas het uiterlijk aan — stel de grootte, kleur, animatiesnelheid en dikte in zodat deze bij uw merk of ontwerpsysteem passen
- Kopieer de code — de generator produceert schone, minimale CSS met keyframe-animaties en de HTML-opmaak die nodig is om de loader weer te geven
- Plak en gebruik — voeg de CSS toe aan uw stylesheet en plaats het HTML-element waar u een laadindicator nodig hebt
Probeer gratis — geen aanmelding vereist
Open de CSS-loader-generator →Wanneer CSS-loaders gebruiken
Laadindicatoren verbeteren de waargenomen prestaties en gebruikerstevredenheid in veel veelvoorkomende scenario’s.
- API-gegevens ophalen — toon een spinner terwijl uw app gegevens laadt van een server, zodat gebruikers weten dat de interface reageert en werkt
- Formulierverzendingen — toon een loader nadat de gebruiker op verzenden klikt om aan te geven dat het verzoek wordt verwerkt en dubbele klikken te voorkomen
- Paginatransities — gebruik een loader tijdens routewijzigingen in single-page applicaties om de overgang tussen inhoudswisselingen te overbruggen
Veelgestelde vragen
Zijn CSS-loaders beter dan GIF-spinners?
Ja, in de meeste gevallen. CSS-loaders zijn vectorgebaseerd waardoor ze scherp blijven op retina-schermen, ze zijn doorgaans kleiner dan 1 KB code en ze kunnen worden aangepast met CSS-variabelen zonder nieuwe afbeeldingsbestanden te maken. GIF-spinners zijn rasterafbeeldingen die wazig kunnen ogen op high-DPI-schermen en extra HTTP-verzoeken toevoegen.
Werken CSS-loaders in alle browsers?
Moderne CSS-animaties en keyframes worden ondersteund in alle huidige browsers, waaronder Chrome, Firefox, Safari en Edge. De gegenereerde code gebruikt standaard CSS-eigenschappen zonder vendor-prefixes, die niet langer nodig zijn voor animatie-ondersteuning.
Hoe centreer ik een CSS-loader op de pagina?
Gebruik CSS Flexbox of Grid op het ouder-element. Stel de ouder in op display flex met align-items center en justify-content center en geef het een hoogte (zoals 100vh voor paginabrede loaders). Het loader-element wordt perfect gecentreerd, zowel horizontaal als verticaal.