CSS Loader Generator
Gratis CSS-loader-generator: tien laad-spinners in pure CSS met live regeling van grootte, snelheid, dikte en kleur, en kant-en-klare HTML en CSS om te kopiëren.
Wat maakt de CSS Loader Generator?
Hij bouwt geanimeerde laadindicatoren in pure CSS: spinner, stippen, balken, rimpel, pols, baan, flip, golf, stuiteren en verloopring. Elk wordt gegenereerd met jouw gekozen grootte, snelheid, dikte en kleur, klaar om te kopiëren als HTML plus CSS.
Hebben de loaders JavaScript of afbeeldingen nodig?
Nee. Elke loader bestaat uit gewone HTML-elementen die met CSS-keyframes animeren. Geen afbeeldingen, iconfonts, libraries of runtime-scripts — het CSS-blok alleen is voldoende.
Hoe voeg ik een loader toe aan mijn site?
Klik een loader in het raster aan, plak het HTML-blok waar de loader moet verschijnen en plak het CSS-blok in je stylesheet. De CSS is zelfstandig en bevat de benodigde @keyframes-regels.
Wat veranderen de vier parameters?
Grootte bepaalt breedte en hoogte van alle loaders, snelheid verandert de animatieduur, dikte beïnvloedt randen en balkbreedtes, en kleur herkleurt meteen elk element in raster en code.
Waarom animeert mijn gekopieerde loader niet?
Meest voorkomende oorzaak: alleen de klasseregels gekopieerd zonder het @keyframes-blok, of de klasnaam in het HTML hernoemd maar niet in het CSS. Kopieer beide blokken ongewijzigd en houd de klasnamen aan.
Zijn de animaties performant?
Ja. Alle loaders animeren alleen transform en opacity, eigenschappen die de browser op de GPU composeert zonder layout of paint te triggersen — zo blijft het vloeiend, zelfs met meerdere loaders per pagina.
Zijn de loaders toegankelijk?
Spinners zijn visuele decoratie; screenreaders hebben baat bij een teksthint. Voeg een verborgen tekst toe zoals "Laden" naast de loader, of geef de loader aria-hidden="true" en meld de voortgang apart.
Worden gegevens naar een server gestuurd?
Nee. De generator draait volledig in je browser. Je instellingen verlaten de pagina nooit en de gegenereerde code wordt lokaal op je apparaat in elkaar gezet.
Hoe CSS Loader Generator te gebruiken
De CSS-loader-generator bouwt geanimeerde laadindicatoren in puur CSS — geen afbeeldingen, geen JavaScript, geen afhankelijkheden. Kies een van de tien stijlen, stel grootte, snelheid, dikte en kleur in en kopieer de gegenereerde HTML en CSS direct in je project.
- Stel de globale parameters in met de vier regelaars: Grootte bepaalt het vak van elke loader, Snelheid verandert de animatieduur, Dikte stuurt randen en balkbreedtes, en Kleur verft elk element.
- Blader door het raster: alle tien loaders blijven live geanimeerd met je huidige instellingen, zodat je ze in één oogopslag vergelijkt. Klik op een loader om hem te selecteren.
- Het detailpaneel toont de geselecteerde loader groter, samen met zijn HTML-fragment en de bijbehorende CSS (inclusief de benodigde @keyframes).
- Druk op HTML kopiëren of CSS kopiëren om elk blok naar je klembord te sturen. De CSS is op zichzelf staand — plak hem in je stylesheet en zet het HTML neer waar de loader moet verschijnen.
- Wijzig een parameter en het raster, de detailvoorbeeld en beide codeblokken actualiseren zich onmiddellijk.
Omdat de loaders puur CSS zijn, kosten ze bijna geen bandbreedte en blijven ze op elk beeldscherm scherp. Combineer de animatie met een tekstlabel voor toegankelijkheid en vermijd duur onder ongeveer 0,5 s — spinners die te snel flitsen verontrusten meer dan ze geruststellen.
Gerelateerde tools
- CSS Minifier Gratis online CSS minifier. Comprimeer en optimaliseer CSS-code direct door spaties, opmerkingen en onnodige tekens te verwijderen. Verklein de bestandsgrootte voor snellere webprestaties.
- CSS Beautifier Formatteer en verfraai CSS-code direct. Converteer gecomprimeerde CSS naar leesbare code met aanpasbare opties.
- Border Radius Generator Gratis online border-radius generator. Sleep 8 handvatten of kies een blob-voorinstelling om organische CSS-vormen te maken en de code direct te kopiëren.
- Kleurconverteerder Gratis online kleurconverteerder. Converteer HEX, RGB, HSL, HSV formaten direct met visuele kiezer. 100% privé, werkt in uw browser.
- CSS Easing Generator Gratis online CSS easing generator. Sleep de cubic-bezier-controlepunten op een interactieve curve, kies uit 18 presets, bekijk een herhalende bal-animatie en kopieer de timingfunctie direct.
- CSS Text-shadow Generator Gratis online text-shadow generator. Stapel meerdere schaduwlagen met offset, vervaging, kleur en dekking, probeer presets als Neon, 3D of Retro en kopieer de CSS direct.
- CSS Clip-path Generator Gratis online CSS clip-path generator. Ontwerp polygon-, circle-, ellipse- en inset-vormen met sleepbare punten, live voorbeeld en CSS-code kopiëren met één klik.
- CSS Border Radius Generator Visuele CSS border-radius generator. Pas elke hoek onafhankelijk aan met realtime voorbeeld en kopieer de CSS-code direct.