Softonic

CSS-laadspinner generator

Stap 1 / 2
Volgende

Een laadspinner laat bezoekers zien dat een pagina, paneel of knop nog bezig is. Stel hieronder grootte, dikte van de ring, kleur en snelheid in, bekijk de voorbeeldweergave en kopieer de klaar CSS voor de laadspinner naar je stylesheet.

Zo krijg je de CSS voor je laadspinner

  1. 1

    Kies een grootte

    Voer de diameter in pixels in. Ongeveer 40 tot 60 voor een inhoudsgebied, kleiner voor gebruik in een regel tekst.

  2. 2

    Kies dikte en kleur

    Stel de dikte van de ring in pixels in en kies de kleur van de bewegende boog met het kleurveld.

  3. 3

    Stel de snelheid in

    Voer de seconden in voor één volledige omwenteling. 1 is een gebruikelijke standaardwaarde.

  4. 4

    Kopieer de CSS

    Gebruik de kopieerknop naast het CSS-vak en plak de regels in je stylesheet.

Wat je krijgt

De generator schrijft twee regels: een klasse .loader en een blok @keyframes spin. De klasse tekent een cirkel, geeft hem een lichtgrijze ring en kleurt de bovenrand van die ring. De keyframes laten de cirkel één volledige rotatie maken, en de regel animation herhaalt dat eindeloos. Meer heb je niet nodig: geen afbeeldingsbestand, geen icoonlettertype en geen script.

Met de standaardwaarden (60 px, ring van 6 px, #10b981, 1 seconde) ziet de uitvoer er zo uit:

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Voeg hem toe aan je pagina

Plak de CSS in je stylesheet en voeg daarna één leeg element toe waar de loader moet verschijnen:

<div class="loader" role="status" aria-label="Laden"></div>

Toon het element zolang het werk loopt en verwijder het, of verberg het met display: none, zodra de inhoud binnen is. De attributen role en aria-label zorgen dat schermlezers de status kunnen aankondigen.

Formaten die werken

Waar hij staat Grootte Dikte
In een kleine knop 16 tot 20 px 2 px
Naast een regel tekst 20 tot 28 px 3 px
Kaart of paneel 40 tot 60 px 4 tot 6 px
Gecentreerd op een lege pagina 60 tot 100 px 6 tot 8 px

Een vuistregel is een dikte van ongeveer een tiende van de diameter. Veel dunner oogt flauw op schermen met hoge resolutie, veel dikker maakt van de ring een vlek.

Dingen om te weten

  • De kleur van de baan is vastgezet op lichtgrijs (#eee). Pas die waarde in de geplakte CSS aan op een donkere achtergrond.
  • De tool maakt één cirkelvormige spinner. Stippen, balken en andere vormen vragen om ander markup.
  • Als er in je project al een klasse loader of een animatie spin bestaat, hernoem ze dan in de geplakte CSS zodat de regels niet botsen.

Tonen en verbergen

Een laadspinner hoort te verschijnen zodra het werk begint en te verdwijnen zodra het klaar is. Een eenvoudig patroon is om een attribuut hidden op het element te laten staan en het weg te halen zodra een verzoek start. Als wachten meestal erg kort is, voeg dan een kleine vertraging van enkele honderden milliseconden toe voordat de ring verschijnt, zodat snelle antwoorden geen spinner laten flitsen. Wat je ook kiest, verberg de spinner ook bij een fout, anders wachten bezoekers op iets dat al is mislukt.

Veelgestelde vragen

Ja. De uitvoer is gewone CSS met één klasse en één keyframes-regel, dus het werkt in elk stylesheet of stijlblok, met elke backend.

Houd het element standaard verborgen en toon het zodra het verzoek start. Verberg het weer zodra het verzoek klaar is. Dat regel je met een klassewisseling of een hidden-attribuut in je eigen code.

De gegenereerde CSS kleurt alleen de bovenrand van de cirkel. Als de cirkel draait, loopt die ene gekleurde boog over de lichtgrijze ring, en dat geeft het draaiende effect.

Ja. Elke waarde is een gewone CSS-eigenschap, dus je kunt de breedte, rand, kleur of animatietijd direct in je stylesheet aanpassen.

Gerelateerde tools

Webpack-configuratiegenerator

Maak een webpack.config.js voor webpack 5 voor gewoon JavaScript, React of Vue: TypeScript, Babel, CSS of Sass, afbeeldingen, HtmlWebpackPlugin, een devserver en de npm install-regel.

SVG-golfgenerator

Genereer een vloeiende SVG-golfscheiding voor headers en footers met instelbare amplitude, frequentie, kleur en positie boven of onder. Kopieer de SVG-code.

Protocol Buffers-decoder

Decodeer Protobuf-bytes lokaal uit hex, Base64, Base64URL, tekst of een bestand, bekijk veldinterpretaties en exporteer een privérapport.

XSD-validator

Valideer een XML-document tegen een XSD-schema en rapporteer discrepanties tussen elementen en typen, inclusief de exacte regelnummers.

XML-formatter

Maak XML-documenten netjes op met consistente inspringing en spoor welgevormdheidsfouten op met exacte regelnummers.

XML naar JSON

Zet XML-documenten om naar schone JSON, waarbij attributen, tekstknopen en arrays waar nodig behouden blijven. Drie stijlen: compact, Badgerfish of letterlijk.

Tool beschikbaar in andere talen

Handleidingen en toepassingen