Generator för enkel CSS-spinner

Varför den här spinnern är enkel

Många laddningsindikatorer använder flera inbäddade element, bakgrundsbilder eller skript. Den här är ett enda div-element formatat som en cirkel. Ringen består av en kant, och bara kantens översta del har en annan färg. När cirkeln roterar färdas den färgade delen runt. Hela tekniken bygger på fyra idéer:

1. En kvadratisk låda med lika bredd och höjd.
2. border-radius: 50% för att göra lådan till en cirkel.
3. En grå kant med en färgad sida, border-top-color.
4. En rotationsanimation som aldrig stannar.

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

<div class="loader"></div>

Det är hela laddningsindikatorn. Det finns inget att ladda ned och inget beroende att hålla uppdaterat.

Centrera den

Ringen är ett vanligt blockelement. Om du vill centrera den på sidan eller i en behållare lägger du till margin: 0 auto; på .loader för horisontell centrering, eller gör den överordnade behållaren till en flex-behållare:

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Vad verktyget inte gör

• Det skapar bara ringens stil. Punktrader, staplar och pulsanimationer är andra designer.
• Banans färg är fast ljusgrå. Ändra den i den inklistrade CSS:en om din bakgrund är mörk.
• Det lägger inte till tillgänglighetsattribut i din markup. Lägg till role="status" och en aria-label på elementet själv.

Små justeringar efter kopiering

Eftersom spinnern bara består av några egenskaper är den lätt att ändra. Vill du att ringen ska se lättare ut minskar du kantens bredd. Vill du att den ska kännas lugnare ökar du animationstiden. Vill du använda samma laddningsindikator i två storlekar kopierar du klassen en gång och åsidosätter bara width, height och border-width i en andra klass. Den korta koden är den största fördelen med en enkel spinner: du kan läsa hela koden på en gång och ändra vilket värde som helst utan att leta igenom ett bibliotek.

Du kan också färga banan genom att ändra #eee till en färg som passar din sida, medan bågen behåller den färg du valde i generatorn.