Hur man skapar: CSS-laddare

Lär dig hur du använder CSS för att skapa en förhandsladdare.

Prova själv

Hur man skapar en laddare

steget 1 - Lägg till HTML:

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

steget 2 - Lägg till CSS:

.loader {
  border: 16px solid #f3f3f3; /* Ljust 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); }
}

Prova själv

exempel förklaring:

border egenskap specificerar laddarens kantstorlek och färg.border-radius egenskapen förvandlar laddaren till en cirkel.

den blå delen som roterar inuti ramen specificeras av border-top egenskap specificerar. Om du vill ha fler "roterare", kan du också inkludera border-bottom,border-left och/eller border-right（se exempel nedan）.

Laddarens storlek specificeras av width och height egenskapsspecifikation.

Till slut lade vi till en animation som gör att den blå delen roterar för evigt med en hastighet på 2 sekunder.

notera:observera: animation och transform browsrarn som inte stöder -webkit- prefix. Klicka på exempel för att se hur man gör.

lägg till fler roterare

Exempel

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

Prova själv

Exempel

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

Prova själv

Exempel

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

Prova själv

Ett annat exempel

Hur man placerar laddaren i mitten av sidan och visar "Innehåll på sidan" när laddningen är klar:

Exempel

Prova själv