Hoe - CSS Loader
Leer hoe u een preloader maakt met CSS.
Een lader maken
Stap 1) HTML toevoegen:
Voorbeeld
<div class="loader"></div>
Stap 2) CSS toevoegen:
Voorbeeld
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation:
spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform:
rotate(360deg); }
}
Voorbeeld uitgelegd
De border
eigenschap specificeert de randgrootte en de randkleur van de lader. De border-radius
eigenschap transformeert de lader in een cirkel.
Het blauwe ding dat binnen de rand ronddraait, wordt gespecificeerd met de
border-top
eigenschap. U kunt ook border-bottom
, border-left
en/of
border-right
als u meer "spinners" wilt (zie voorbeeld hieronder).
De grootte van de lader wordt gespecificeerd met de width
en height
eigenschappen.
Ten slotte voegen we een toe animation
die het blauwe ding voor altijd laat draaien met een animatiesnelheid van 2 seconden.
Opmerking: u moet ook een -webkit- voorvoegsel opnemen voor browsers die geen animatie- en transformatie-eigenschappen ondersteunen. Klik op het voorbeeld om te zien hoe.
Voeg meer spinners toe
Voorbeeld
.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}
Voorbeeld
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
Voorbeeld
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
Een ander voorbeeld
Een voorbeeld van hoe de lader in het midden van de pagina te plaatsen en "pagina-inhoud" te tonen wanneer het laden is voltooid: