Eenvoudige CSS-spinner generator

Waarom deze spinner eenvoudig is

Veel loaders gebruiken meerdere geneste elementen, achtergrondafbeeldingen of een script. Deze is één div die als cirkel is opgemaakt. De ring bestaat uit een rand, en alleen het bovenste deel van die rand heeft een andere kleur. Door de cirkel te laten draaien, loopt dat gekleurde deel rond de omtrek. De hele techniek steunt op vier ideeën:

1. Een vierkante doos met gelijke breedte en hoogte.
2. border-radius: 50% om de doos in een cirkel te veranderen.
3. Een grijze rand met één gekleurde kant, via border-top-color.
4. Een rotatie-animatie die nooit stopt.

De volledige code

.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>

Dat is de hele loader. Er is niets om te downloaden en geen afhankelijkheid om up-to-date te houden.

Centreren

De ring is een gewoon blokelement. Om hem op de pagina of in een container te centreren, voeg je margin: 0 auto; toe aan .loader voor horizontaal centreren, of maak je het bovenliggende element een flexcontainer:

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

Wat deze tool niet doet

• Hij maakt alleen de stijl van de ring. Rijen stippen, balken en puls-loaders zijn andere ontwerpen.
• De kleur van de baan is vastgezet op lichtgrijs; pas die aan in de geplakte CSS als je achtergrond donker is.
• Hij voegt geen toegankelijkheidsattributen toe aan je markup. Voeg zelf role="status" en een aria-label toe aan het element.

Kleine aanpassingen na het kopiëren

Omdat de spinner maar een paar eigenschappen heeft, is hij makkelijk aan te passen. Wil je de ring lichter laten lijken, verklein dan de breedte van de rand. Wil je hem rustiger maken, verhoog dan de animatietijd. Om dezelfde loader in twee formaten te gebruiken, kopieer je de klasse één keer en overschrijf je alleen width, height en border-width in een tweede klasse. Die korte code is het grote voordeel van een eenvoudige spinner: je kunt hem in één oogopslag lezen en elke waarde wijzigen zonder in een bibliotheek te zoeken.

Je kunt de baan ook kleuren door #eee te vervangen door een kleur die bij je pagina past, terwijl de bewegende boog de kleur houdt die je in de generator hebt gekozen.