Hoe je een maakt: CSS loader

Leer hoe je een preloader maakt met CSS.

Try it yourself

Hoe je een loader maakt

Stap 1 - Voeg HTML toe:

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

Stap 2 - Voeg CSS toe:

.loader {
  border: 16px solid #f3f3f3; /* Lichtgrijs */
  border-top: 16px solid #3498db; /* Blauw */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Try it yourself

Voorbeeld uitleg:

border eigenschap specificeert de grootte en kleur van de rand van de loader.border-radius eigenschap om de loader om te vormen tot een cirkel.

Het blauwe deel dat in de rand rolt, wordt gespecificeerd door border-top eigenschappen specificeren. Wil je meer 'rotaties' toevoegen, dan kun je ook border-bottom,border-left en/of border-right（zie het voorbeeld hieronder).

De grootte van de loader wordt bepaald door width en height eigenschap specificeren.

Tot slot hebben we een animatie toegevoegd die het blauwe deel voortdurend met een animatiesnelheid van 2 seconden laat draaien.

Opmerking:niet ondersteunen animation en transform Browseren die de -webkit- Voorvoegsel. Klik op het voorbeeld om te zien hoe je dit kunt doen.

Voeg meer rotaties toe

Example

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

Try it yourself

Example

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

Try it yourself

Example

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

Try it yourself

Another example

How to place the loader in the center of the page and display 'Page content' when the loading is complete:

Example

Try it yourself