Softonic

Toegankelijke CSS-spinner generator

Stap 1 / 2
Volgende

Een draaiende ring betekent niets voor iemand die een schermlezer gebruikt, en constante beweging kan mensen die daar gevoelig voor zijn hinderen. Maak hier de spinner en voeg daarna de markup en de regel voor verminderde beweging hieronder toe.

Zo maak je de spinner toegankelijk

  1. 1

    Genereer de ring

    Stel grootte, dikte, kleur en snelheid in de tool in en kopieer daarna de CSS.

  2. 2

    Controleer het kleurcontrast

    Kies een kleur voor de boog die duidelijk opvalt tegen de lichtgrijze baan en de achtergrond van de pagina.

  3. 3

    Voeg de statusmarkup toe

    Zet role en een label op het spinner-element, zoals op deze pagina getoond.

  4. 4

    Voeg de regel voor verminderde beweging toe

    Plak de mediaquery hieronder onder de gegenereerde CSS.

Wat de gegenereerde CSS wel en niet afdekt

De tool levert het visuele deel: een omrande cirkel en een rotatie. Een puur visuele loader heeft voor hulptechnologie geen betekenis, omdat het element leeg is. Toegankelijkheid komt van de markup en van één extra CSS-regel die je eromheen zet.

Markup die de status aankondigt

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

role="status" markeert het element als live-regio, waardoor veel schermlezers het label voorlezen zodra het verschijnt. Het aria-label moet zeggen wat er wordt geladen, zoals “Resultaten laden” of “Opslaan”, en geen algemeen woord. Verwijder het element zodra het werk klaar is en toon de nieuwe inhoud.

Je kunt ook zichtbare tekst naast de ring zetten. Zichtbare tekst helpt iedereen, ook mensen die de beweging slecht kunnen zien.

Respecteer verminderde beweging

Sommige bezoekers zetten een systeeminstelling aan waarmee sites worden gevraagd animaties te beperken. Respecteer die met een mediaquery die na de gegenereerde CSS staat:

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

Dit vertraagt de rotatie in plaats van haar te verwijderen, zodat de loader actief blijft lijken zonder snelle beweging. Wil je liever een statisch signaal, gebruik dan animation: none; en toon de tekst “Laden” naast de ring.

Checklist voor contrast en grootte

Controle Waar je naar streeft
Boog op de pagina Duidelijk zichtbaar, idealiter een verhouding van 3:1 of meer
Boog op de grijze baan Onderscheidend, zodat de boog gevolgd kan worden
Grootte Minimaal 24 px voor alles wat de bezoeker moet opmerken
Snelheid Tussen 0,8 en 1,5 seconden per omwenteling

Beperkingen

  • De generator kiest de kleur van de baan (#eee) voor je. Pas die aan in de geplakte CSS als je paginaachtergrond vergelijkbaar is.
  • Een zeer hoge snelheidswaarde laat de ring flikkeren. Vermijd alles onder ongeveer 0,5 seconden.
  • Vertrouw bij lange wachttijden niet alleen op de spinner. Vertel mensen in tekst wat er gebeurt.

Snel testen

Zet de optie voor verminderde beweging aan in je besturingssysteem en laad de pagina opnieuw: de ring moet nu trager draaien. Navigeer daarna met het toetsenbord door de pagina om te controleren dat de spinner de focus nooit wegneemt van het bedieningselement dat de bezoeker gebruikte. Zet tot slot een schermlezer aan en start de laadstatus één keer, zodat je hoort of het label wordt voorgelezen wanneer het element verschijnt en of de nieuwe inhoud daarna bereikbaar is.

Veelgestelde vragen

Alleen als je markup toevoegt. Een leeg element is stil, dus geef het role=“status” en een beschrijvend aria-label.

Het is een CSS-mediaquery die waar is wanneer een bezoeker op zijn apparaat heeft aangegeven dat animaties verminderd moeten worden. Je kunt hem gebruiken om de spinner te vertragen of te stoppen.

Beide zijn acceptabel. Vertragen behoudt een hint van activiteit, terwijl stoppen de veiligste keuze is als je ook een tekstbericht zoals “Laden” toont.

Beschrijf de actie in gewone woorden, bijvoorbeeld “Resultaten laden” of “Wijzigingen opslaan”. Vermijd vage labels zoals “spinner”.

Een grotere afmeting en sterk contrast maken hem makkelijker te zien, maar ze vervangen niet het tekstlabel dat hulptechnologie voorleest.

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