Generator för spinner i knappar i CSS

Ett arbetsexempel

Anta att du har en mörkblå knapp med texten “Spara” i vitt. I generatorn anger du storlek 16, tjocklek 2, färg #ffffff och hastighet 0,8. Verktyget ger:

.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); }
}

Ringens bana är en fast ljusgrå färg som syns bra på en mörk knapp. Vill du ha en mer diskret bana ändrar du #eee till ett genomskinligt värde, till exempel rgba(255, 255, 255, 0.3), i den inklistrade CSS:en. Bågens färg står kvar som du valde den.

Placera den i knappen

Lägg spinner-elementet före etiketten och gör knappen till en flex-rad, så att de sitter på samma linje med ett mellanrum:

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

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

Lägg till spinnern och tillståndet disabled först när begäran pågår. Ta bort båda när den är klar. Att inaktivera knappen är det som hindrar dubbla inskickningar, och spinnern är signalen som förklarar varför.

Storlek och tjocklek för knappar

Anteckningar

• Generatorn skapar en enda cirkulär ring. Den skapar ingen knapp, så dina knappstilar förblir dina egna.
• En ring som är tjockare än en fjärdedel av diametern fylls upp och ser ut som en skiva, så håll tunna värden för små storlekar.
• Behåll etiketten bredvid spinnern. En spinner utan text kan vara svår att tolka för vissa användare.

Undvik layouthopp

Om spinnern visas och knappen plötsligt blir bredare förskjuts layouten och klickytan flyttas. Två enkla lösningar hjälper. Ge knappen en minsta bredd som redan rymmer spinnern och den längre etiketten. Eller reservera utrymmet för spinnern från början genom att visa en tom 16 px platshållare före etiketten. Eftersom den genererade ringen har fast bredd och höjd i pixlar är det lätt att reservera exakt det utrymme den behöver.