Comment - CSS Loader
Apprenez à créer un préchargeur avec CSS.
Comment créer un chargeur
Étape 1) Ajoutez du HTML :
Exemple
<div class="loader"></div>
Étape 2) Ajoutez CSS :
Exemple
.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); }
}
Exemple expliqué
La border
propriété spécifie la taille et la couleur de la bordure du chargeur. La border-radius
propriété transforme le chargeur en cercle.
La chose bleue qui tourne à l'intérieur de la bordure est spécifiée avec la
border-top
propriété. Vous pouvez également inclure border-bottom
, border-left
et/ou
border-right
si vous voulez plus de "spinners" (voir l'exemple ci-dessous).
La taille du chargeur est spécifiée avec les propriétés width
et height
.
Enfin, nous ajoutons un animation
qui fait tourner la chose bleue pour toujours avec une vitesse d'animation de 2 secondes.
Remarque : Vous devez également inclure un préfixe -webkit- pour les navigateurs qui ne prennent pas en charge les propriétés d'animation et de transformation. Cliquez sur l'exemple pour voir comment.
Ajouter plus de filateurs
Exemple
.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}
Exemple
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
Exemple
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
Un autre exemple
Un exemple de la façon de placer le chargeur au milieu de la page et d'afficher le "contenu de la page" lorsque le chargement est terminé :