Création d’une barre de chargement avec CSS

Écrit par Victor D.

Bonjour à tous, aujourd’hui je vais vous présenter une petite astuce pour mettre en place une barre de chargement avec un tooltip qui affichera de façon élégante où elle en est, le tout avec quelques lignes de CSS.

J’expliquerai en détails les différentes règles CSS que j’ai utilisées, ce tuto est donc plutôt réservé aux débutants ou aux curieux. Si vous êtes déjà impatient de découvrir cette barre de chargement, voyez un aperçu sur codepen.

Partie DOM

Dans un premier temps, mettons en place notre HTML. On va essayer de rester simple, un conteneur pour la barre en elle-même et à l’intérieur une seconde barre qui nous indiquera le taux de complétion du chargement.

  <div class="bar">
    <div class="percentage has-tip"  style="width: 50%" data-perc="50%">
    </div>
  </div>

Les attributs HTML, nous servirons à contrôler l’élément avec JavaScript pour la démonstration mais aussi à donner le pourcentage de chargement à la bulle qui suit l’élément coloré.

Les classes .bar et .percentage, nous aiderons à sélectionner ces éléments et la classe .has-tip permettra de mettre en place l’info-bulle.

Dans l’idéal, avec un framework JS front de type Angular ou Ember, nous pourrions mettre en place un binding sur les 2 attributs (en n’oubliant pas de leur passer une chaîne et pas un entier).

Partie CSS

Passons maintenant à la partie la plus intéressante, les CSS. J’ai fait en sorte de définir chacune des tailles avec l’unité em dans un souci de flexibilité (vous n’aurez donc qu’à changer le font-size de l’élément pour agrandir ou réduire sa taille).

Le conteneur

Dans un premier temps, nous définissons un conteneur, dont la largeur devra être définie afin de laisser la possibilité au contenu d’être dimensionné en pourcentage.

Cet élément devra disposer d’une position: relative; afin de placer ses enfants en absolute.

Pour l’exemple, je souhaitais avoir une bordure intérieure, qui passe sous le contenu, plutôt que d’utiliser des astuces de bordures + marge négative, je préfère utiliser une box-shadow (avec une valeur de spread à 1px qui définira l’épaisseur de la bordure).

  .bar {
    /* font-size: 10px */
    width: 30em
    height: 1em
    border-radius: 0.5em
    position: relative
    background: #f2f2f2
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1)
  }

Le contenu

Rien de bien sorcier pour la barre de complétion, nous lui appliquons une couleur bien visible, une hauteur égale à son conteneur et une position: relative puisque d’autres éléments arriveront plus tard en absolute.

Notez que j’ai utilisé des border-radius identiques pour ces 2 éléments, cela nous permettra de ne pas avoir à mettre un overflow:hidden sur le conteneur, qui nous gênerait par la suite.

  .bar .percentage {
    position: relative
    font-size: 1em
    background: tomato
    height: 1em
    border-radius: 0.5em
  }

L’infobulle

Pour l’infobulle, je voudrais ne pas créer de nouveaux éléments HTML, pour cela, nous utilisons les pseudo-éléments CSS (:before et :after).

Dans l’exemple sur codepen (que vous retrouverez en fin d’article) j’ai pris le parti pris d’utiliser une classe spécifique pour l’info bulle : has-tip. Cela vous permettrait de l’utiliser dans d’autre situation pour remplacer un plugin Javascript de tooltip par exemple.

Pour les 2 pseudo-éléments, nous mettons un content pour qu’ils soient générés dans le DOM, un positionnement absolu par rapport à la barre de défilement et une opacité nulle pour ne l’afficher qu’en cas de besoin.

  .has-tip:before,
  .has-tip:after {
    content: "";
    position: absolute;
    opacity: 0;
  }

Flèche vers le haut (ou comment faire un triangle avec CSS)

Pour indiquer que l’info-bulle est bien relative (visuellement) à la barre de complétion, nous allons créer avec :before une flèche allant de l’info bulle vers la barre (vers le haut dans notre cas). Pour cela, nous allons jouer avec une astuce des bordures qui nous permet de créer un triangle en 2 lignes de CSS. Nous définissons 4 bordures de même taille, type solid, et de couleur transparente sauf celle du bas afin de créer un triangle vers le haut (n’hésitez pas à tester cette technique si elle ne vous est pas familière, c’est très pratique). La transition permettra de rendre plus fluide une quelconque animation de l’élément.

 .has-tip:before {
    bottom: -10px;
    right: -5px;
    border: 5px solid;
    border-color: transparent transparent tomato transparent;
    transition: opacity 0.1s;
  }

Dans l’infobulle, il y a surtout “bulle”

Maintenant la partie fonctionnelle de la bulle, nous allons afficher la valeur actuelle de la barre de chargement.

On commence par récupérer la valeur définie dans l’attribut data-perc de notre barre de complétion avec content: attr, je lui applique un padding, un border-radius, des couleurs pour que ce soit plus élégant, et des transitions pour une probable animation.

J’ai décidé de placer l’élément avec transform afin de pouvoir jouer avec cette propriété pendant une animation. Le translateX sert surtout à être sûr que la bulle sera alignée en son centre avec la flèche et le bord droit de la barre de chargement.

.has-tip:after {
     content: attr(data-perc);
     bottom: 0;
     right: 0;
     white-space:nowrap;
     padding: 0.6em 1em;
     border-radius: 2em;
     line-height: 1;
     color: #fff;
     background: tomato;
     transform: translateX(50%) translateY(100%);
     transition: transform 0.2s,opacity 0.1s;
}

Maintenant, on affiche tout ça

J’ai décidé pour l’exemple d’afficher l’infobulle au :hover de l’élément mais aussi lorsque ce dernier a une classe .active (afin de gérer facilement une animation plus complète avec JavaScript).

Nous commençons par afficher la flèche en modifiant son opacité. Nous faisons pareil avec la bulle dans le bloc suivant, et cette fois-ci, nous modifions la position de 10px (qui est la taille de notre flèche, rappelez-vous), nous obtiendrons de cette manière un effet léger de défilement de la bulle lorsque nous survolerons la barre.

.has-tip:hover:before,
.has-tip.active:before {
  opacity: 1; 
} 

.has-tip:hover:after,
.has-tip.active:after { 
  opacity: 1; 
  transform: translateX(50%) translateY(100%) translateY(10px); 
}

Maintenant que nous avons vu en détails la construction de cette barre de chargement, voici le résultat que vous devriez obtenir :

See the Pen CSS loading bar by Victor Darras (@victordarras) on CodePen.

Je ne m’attarderai pas sur le JavaScript, il n’est pas très intéressant et ne sert qu’à l’animation.

N’hésitez pas à déformer, hacker ou adapter cet élément visuel, je serais curieux de voir ce que chacun pourra en faire. N’oubliez pas que vous pouvez me poser des questions en bas de page et partager cet article s’il vous a plu.

À bientôt !