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