CSS-spinner voor knoppen generator

Een uitgewerkt voorbeeld

Stel dat je een donkerblauwe knop “Opslaan” hebt met witte tekst. Vul in de generator grootte 16, dikte 2, kleur #ffffff en snelheid 0.8 in. De tool maakt:

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

De baan van de ring is een vaste lichtgrijze tint, die goed zichtbaar is op een donkere knop. Wil je een subtielere baan, vervang dan #eee in de geplakte CSS door een transparante waarde zoals rgba(255, 255, 255, 0.3). De kleur van de boog blijft wat je hebt gekozen.

Plaats hem in de knop

Zet het spinner-element vóór het label en maak de knop een flexrij, zodat beide op één lijn staan met een tussenruimte:

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="Opslaan"></span>
  Opslaan
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

Voeg de spinner en de status disabled alleen toe zolang het verzoek loopt. Verwijder beide zodra het klaar is. Het uitschakelen van de knop voorkomt dubbele verzendingen; de spinner is het signaal dat uitlegt waarom.

Grootte en dikte voor knoppen

Opmerkingen

• De generator maakt één cirkelvormige ring. Hij maakt geen knop, dus je knopstijlen blijven van jou.
• Een ring die dikker is dan een kwart van de diameter vult zich en lijkt op een schijf, dus houd de waarden bij kleine formaten dun.
• Houd het label naast de spinner. Een spinner zonder tekst kan voor sommige gebruikers lastig te begrijpen zijn.

Voorkom verspringen van de lay-out

Als de spinner verschijnt en de knop ineens breder wordt, schuift de lay-out en verplaatst het klikgebied zich. Twee eenvoudige oplossingen helpen. Geef de knop een minimale breedte die de spinner en het langste label al past. Of reserveer de ruimte voor de spinner vanaf het begin door vóór het label een lege plek van 16 px te tonen. Omdat de gegenereerde ring een vaste breedte en hoogte in pixels heeft, is het makkelijk om precies de ruimte te reserveren die hij nodig heeft.