Hvordan man opretter: CSS loader

Lær, hvordan du bruger CSS til at oprette en forhåndslæser.

Prøv det selv

Hvordan man opretter en loader

Første trin - Tilføj HTML:

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

Andet trin - Tilføj CSS:

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

Prøv det selv

Eksempel forklaring:

border egenskab specificerer loaderens kantstørrelse og farve.border-radius egenskab omdanner loaderen til en cirkel.

den blå del, der roterer inde i kantene, defineres af border-top egenskaber specificerer. Hvis du vil have flere "rotatorer", kan du også inkludere border-bottom,border-left og/eller border-right（se eksemplet nedenfor）.

Størrelsen på loaderen bestemmes af width og height egenskab specificeret.

Til sidst tilføjede vi en animation, der får den blå del til at rotere for evigt med en hastighed på 2 sekunder.

Bemærk:for animation og transform browser, der understøtter -webkit- præfiks. Klik på eksemplet for at se, hvordan du gør det.

tilføj flere rotatorer

Eksempel

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

Prøv det selv

Eksempel

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

Prøv det selv

Eksempel

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

Prøv det selv

En anden eksempel

Sådan placeres loaderen i midten af siden, og viser 'Indhold på siden' når laden er færdig:

Eksempel

Prøv det selv