CSS-loadergenerator

Wat is CSS-loadergenerator?

De CSS-loadergenerator is een gratis browser-tool voor webdesigners en front-end-ontwikkelaars die een pure-CSS-laadindicator nodig hebben zonder een bibliotheek toe te voegen. Kies uit vijf stijlen - spinner, ring, puntjes, balken en pulse - en bepaal de grootte in pixels, de hoofdkleur, de snelheid van één animatiecyclus in seconden, de lijndikte en het aantal puntjes of balken. Een live voorbeeld animeert terwijl je bewerkt, en de bijbehorende HTML-markup plus een CSS-styleblok met @keyframes wordt direct bijgewerkt, zodat je het rechtstreeks in een pagina kunt plakken. Gebruik het voor knoppen, paginaloaders, skeletonstaten en asynchrone placeholders, of om te leren hoe CSS-animatie en @keyframes elk effect aandrijven.

CSS-loadergenerator gebruiken

1. Kies een loaderstijl: Spinner, Ring, Puntjes, Balken of Pulse.
2. Stel de grootte in pixels in en kies een kleur met het staal of door een waarde te typen.
3. Stel de animatiesnelheid in seconden in voor één volledige cyclus.
4. Open Instellingen om de lijndikte (spinner en ring) of het aantal puntjes of balken aan te passen.
5. Bekijk de animatie in het live voorbeeld en kopieer daarna de gegenereerde HTML en CSS met de kopieerknop.

Voorbeelden

Stijl: Spinner, grootte 48px, kleur #4f86f7, snelheid 1s, dikte 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

Stijl: Puntjes, grootte 48px, kleur #9333ea, snelheid 1s, aantal 3

<div class="dd-loader"><div></div><div></div><div></div></div> met gespreide animation-delay zodat de puntjes in een golf schalen.

Veelgestelde vragen

Welke loaderstijlen zijn beschikbaar?

Vijf: Spinner (een draaiende boog), Ring (een dikkere draaiende ring), Puntjes (puntjes die in een golf schalen), Balken (balken die op en neer rekken) en Pulse (een enkele pulserende cirkel). Wissel met het stijlmenu en het voorbeeld en de code worden direct bijgewerkt.

Wat doen de instellingen voor grootte, kleur en snelheid?

De grootte bepaalt de pixelafmetingen van de loader, de kleur bepaalt de hoofdkleur (gebruik de kiezer of typ een willekeurige CSS-kleur) en de snelheid is de duur van één animatiecyclus in seconden. De dikte bepaalt de lijn voor de spinner en ring, terwijl het aantal bepaalt hoeveel puntjes of balken verschijnen.

Is de gegenereerde CSS pure CSS zonder JavaScript?

Ja. Het fragment is gewone HTML plus een <style>-blok met CSS-animatie en @keyframes, dus het draait zonder JavaScript of externe bibliotheek. Plak het in je pagina en het werkt op zichzelf.

Waarom veranderen dikte en aantal niet elke stijl?

De dikte heeft alleen invloed op de spinner en ring (die een rand tekenen), terwijl het aantal alleen invloed heeft op puntjes en balken (die meerdere elementen renderen). De andere stijlen negeren ze, zodat de uitvoer netjes blijft voor de stijl die je koos.

Wordt er iets naar een server geüpload?

Nee. De loader en de bijbehorende CSS worden volledig in je browser opgebouwd met lokale string-berekening - er worden nooit instellingen, kleuren of code naar een server gestuurd, dus het werkt offline en houdt je werk privé.