CSS-laddningsgenerator

Så fungerar den genererade CSS-koden

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

Spinnaren är en cirkel som ritas med en tjock kantlinje. Regeln border-top-color färgar bara toppen av ringen med accentfärgen, så ringen uppfattas som en båge, och regeln @keyframes spin roterar den runt sin mittpunkt. Rotation med transform: rotate() håller animeringen billig, eftersom webbläsaren flyttar elementet på kompositorn i stället för att rita om det bildruta för bildruta.

För att visa den på en sida lägger du till ett element och laddar CSS:

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

Gör den tillgänglig

• Lägg till role="status" så att skärmläsare läser upp spinnaren.
• Sätt aria-label till statustexten, till exempel “Laddar”.
• Dölj inte innehåll bakom en spinnare i mer än några sekunder utan en reservlösning vid timeout.
• Respektera prefers-reduced-motion. Ersätt roterande animation med en enkel toning eller en statisk text “Laddar…” för användare som valt bort rörelse:

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

När du ska använda en spinnare i stället för ett optimistiskt gränssnitt

• Svar under 100 ms: ingen spinnare behövs; det mänskliga ögat märker knappt fördröjningen.
• 100 ms – 1 s: en diskret spinnare (litet ring, knapptext “Laddar…”) förhindrar dubbelklick.
• 1 s – 10 s: en tydlig spinnare, helst med förlopp om det går att mäta.
• > 10 s: det är inte ett spinnarproblem; ta reda på vad som är långsamt och åtgärda det.

Vid formulärskick och knappklick är en spinnare inuti knappen oftast bättre än ett lager över hela sidan.