Overlay-spinner CSS generator

Twee delen: de spinner en het overlay

De generator maakt de spinner: de klasse .loader en de regel @keyframes spin. Het overlay is een aparte wrapper die je zelf toevoegt. Het bedekt het hele zichtbare venster en centreert zijn kindelement. Die scheiding is handig, omdat je dezelfde spinner in een knop of kaart kunt hergebruiken en de wrapper alleen gebruikt wanneer je een blokkerende status nodig hebt.

Wrapper-CSS

Plak dit na de gegenereerde regels:

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1000;
}

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

position: fixed met inset: 0 rekt de laag uit tot alle vier de randen van het scherm. De flexinstellingen centreren de spinner in beide richtingen. De z-index houdt de laag boven gewone inhoud, dus verhoog hem als een koptekst of modaal venster er nog bovenop staat.

Alleen een gebied bedekken in plaats van de pagina

Als alleen een kaart of tabel laadt, geef de container daarvan position: relative en zet de wrapper van het overlay op position: absolute:

.panel { position: relative; }
.panel .overlay { position: absolute; }

De rest van de pagina blijft bruikbaar en alleen dit paneel wordt gedimd.

Kies de overlaykleur passend bij de pagina

Pas op een donkere pagina ook de kleur van de baan #eee aan in de geplakte loader-CSS, zodat de ring niet te sterk gloeit.

Goede praktijk

• Verwijder het overlay zodra het werk klaar is, anders blijft de pagina geblokkeerd.
• Gebruik het voor korte wachttijden. Toon bij lange bewerkingen tekst die uitlegt wat er gebeurt.
• Het markup van het overlay en de focusafhandeling zijn van jou. Deze tool levert alleen de spinner.

Voorkom dat de pagina scrolt

Een vast overlay verbergt de pagina, maar de inhoud erachter kan nog scrollen met het wiel of met aanraken. Als dat een probleem is, voeg dan overflow: hidden; toe aan de body zolang het overlay zichtbaar is, en verwijder het wanneer het overlay verdwijnt. Koppel die regel aan hetzelfde moment waarop je het overlay toont en verbergt, zodat beide nooit uit de pas lopen.