Hoe OM - CSS Loader
Leer hoe om 'n voorlaaier met CSS te skep.
Hoe om 'n laaier te skep
Stap 1) Voeg HTML by:
Voorbeeld
<div class="loader"></div>
Stap 2) Voeg CSS by:
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 Verduidelik
Die border
eiendom spesifiseer die randgrootte en die randkleur van die laaier. Die border-radius
eiendom verander die laaier in 'n sirkel.
Die blou ding wat binne die grens ronddraai, word saam met die
border-top
eiendom gespesifiseer. Jy kan ook insluit border-bottom
, border-left
en/of
border-right
as jy meer "draaiers" wil hê (sien voorbeeld hieronder).
Die grootte van die laaier word gespesifiseer met die width
en height
eienskappe.
Uiteindelik voeg ons 'n by animation
wat die blou ding vir ewig laat draai met 'n animasiespoed van 2 sekondes.
Let wel: Jy moet ook 'n -webkit- voorvoegsel insluit vir blaaiers wat nie animasie en transformasie eienskappe ondersteun nie. Klik op die voorbeeld om te sien hoe.
Voeg nog spinners by
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;
}
Nog 'n voorbeeld
'n Voorbeeld van hoe om die laaier in die middel van die bladsy te plaas en "bladsy-inhoud" te wys wanneer die laai voltooi is: