Comment créer : Chargeur CSS

Apprenez à créer un préchargeur avec CSS.

Essayer par vous-même

Comment créer un chargeur

Première étape - Ajouter HTML :

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

Deuxième étape - Ajouter CSS :

.loader {
  border: 16px solid #f3f3f3; /* Gris clair */
  border-top: 16px solid #3498db; /* Bleu */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Essayer par vous-même

Exemple d'explication :

border attribut spécifie la taille et la couleur des bords du chargeur.border-radius propriété transforme le chargeur en forme circulaire.

La partie bleue qui tourne à l'intérieur des bords est déterminée par border-top attributs spécifient. Si vous souhaitez plus de "rotateurs", vous pouvez également inclure border-bottom,border-left et/ou border-right（voir l'exemple ci-dessous).

La taille du chargeur est déterminée par width et height attribut spécifié.

Enfin, nous avons ajouté une animation qui fait tourner le bleu en permanence à une vitesse d'animation de 2 secondes.

Attention :pour ceux qui ne le prennent pas en charge animation et transform les navigateurs prenant en charge cette propriété, vous devriez également inclure une -webkit- préfixe. Cliquez sur l'exemple pour voir comment procéder.

ajouter plus de rotateurs

Exemple

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

Essayer par vous-même

Exemple

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

Essayer par 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;
}

Essayer par vous-même

Un autre exemple

Comment placer le chargeur au centre de la page et afficher "Contenu de la page" une fois le chargement terminé :

Exemple

Essayer par vous-même