Generator för laddningsspinner i CSS

Vad du får

Generatorn skriver två regler: en klass .loader och ett block @keyframes spin. Klassen ritar en cirkel, ger den en ljusgrå ring och färgar ringens övre kant. Keyframes låter cirkeln göra ett helt varv, och raden animation upprepar det för evigt. Inget annat behövs: ingen bildfil, ingen ikonfont och inget skript.

Med standardvärdena (60 px, 6 px ring, #10b981, 1 sekund) ser resultatet ut så här:

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

Lägg till den på din sida

Klistra in CSS:en i din stilmall och lägg sedan till ett tomt element där spinnern ska visas:

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

Visa elementet medan arbetet pågår och ta bort det, eller dölj det med display: none, när innehållet kommer. Attributen role och aria-label gör att skärmläsare kan läsa upp tillståndet.

Storlekar som fungerar

En tumregel är en tjocklek på ungefär en tiondel av diametern. Mycket tunnare ser blekt ut på skärmar med hög upplösning, och mycket tjockare gör ringen till en klump.

Saker att känna till

• Banans färg är fast ljusgrå (#eee). På en mörk bakgrund ändrar du det värdet i den inklistrade CSS:en.
• Verktyget skapar en enda cirkulär spinner. Punkter, staplar och andra former kräver annan markup.
• Om en klass som heter loader eller en animation som heter spin redan finns i ditt projekt byter du namn på dem i den inklistrade CSS:en, så att reglerna inte krockar.

Visa och dölj den

En laddningsspinner ska visas när arbetet startar och försvinna när det är slut. Ett enkelt mönster är att ha ett attribut hidden på elementet och ta bort det när en begäran startar. Om väntetiden oftast är mycket kort kan du lägga till en fördröjning på några hundra millisekunder innan ringen visas, så att snabba svar inte blinkar till med en spinner. Oavsett vad du väljer ska du alltid dölja spinnern även vid fel, annars väntar besökaren på något som redan har misslyckats.