Créer un loader en CSS

On a souvent besoin de créer un loader pour montrer aux utilisateurs que des données sont en train de se charger.

Loader

En effet, si on clique sur un bouton et que rien ne se passe, on a le sentiment qu’il y a un problème, que notre action n’a pas été prise en compte.

Pour cela on utilise un loader qui apparaît lorsqu’une action chargeant des données a été entrepris par l’utilisateur.

Pour cela il y a 2 moyens :

  • Utiliser une image .svg animé.
  • Utiliser une div stylisé en CSS.

Pour la première solution on peut utiliser un site comme https://loading.io/ pour créer son loader.

Mais la deuxième solution est simple, et je vais vous l’expliquer.

Pour assurer une meilleur compréhension, je vais réaliser le loader étape par étape, et tout réaliser sur le même fichier.

Bien évidemment, normalement le CSS doit se trouver dans un autre fichier.

Voici la base sur laquelle nous allons travailler :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loader</title>
  <style>
    #loader {
      width: 100px;
      height: 100px;
      border: 20px solid #CCCCCC;
    }
  </style>
</head>
<body>
  <div id="loader"></div>
</body>
</html>

Ce qui donne :

La base du loader

Donc voilà ! On a une div d’id #loader de 100px sur 100px, avec des bordures grises larges de 20px.

Bien évidement en fonction de votre cas vous pouvez adapter les dimensions. Ce qui est intéressant c’est le ratio bordure/côté qui est de 20% et qui donne un résultat bien équilibré.

Après il faut qu’une partie de la bordure soit d’une couleur différente. J’ai choisie le haut :

#loader {
      width: 100px;
      height: 100px;
      border: 20px solid #CCCCCC;
      border-top: 20px solid #1177FF;
}
Un côté coloré

Bon ! Là on commence à comprendre pourquoi ça va faire un loader ! Il faut donc faire en sorte que ce carré devienne un cercle. Et pour cela on va simplement utiliser border-radius, vous savez la propriété qui sert à arrondir les angles des bordures.

#loader {
      width: 100px;
      height: 100px;
      border: 20px solid #CCCCCC;
      border-top: 20px solid #1177FF;
      border-radius: 50%;
}
Le loader sous sa forme final

Il ne reste plus maintenant qu’à l’animer. Pour cela il nous faut créer une animation qui définit la rotation d’un élément, puis attacher cette animation ainsi que ces propriétés (durée, déroulement, nombre de répétitions) à notre loader.

#loader {
      width: 100px;
      height: 100px;
      border: 20px solid #CCCCCC;
      border-top: 20px solid #1177FF;
      border-radius: 50%;
      animation: spin 1s linear infinite;
}

@keyframes spin {
      0% { transform: rotate(0deg);}
      100% { transform: rotate(360deg);}
}
Pour marque-pages : Permaliens.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *