Go to Hackademy website

Création d'une barre de chargement avec CSS

Victor Darras

Posté par Victor Darras dans les catégories design

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é, 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 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 soucis 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érieur, 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 arriverons 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’info-bulle

Pour l’info-bulle, je voudrais ne pas créer de nouveaux élément 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 info-bulle, 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’info-bulle 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’attarderais 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.

A bientôt !

L’équipe Synbioz.

Libres d’être ensemble.

Articles connexes

Création d'un menu en accordéon avec CSS

04/06/2015

Bonjour à tous, l’article d’aujourd’hui , dans la lignée de celui concernant la barre de chargement en CSS portera sur la création d’un élément bien connu des intégrateurs, en particulier sur les...

Exporter des assets pour Android avec Sketch

17/04/2015

Bien le bonjour intrépides lecteurs, aujourd’hui je vais vous faire part d’un plugin pour Sketch (que je présente depuis quelques temps sur ce blog). Baptisé Sketch Android Assets, ce plugin vous...

Client, designer, développeur: un workflow qui fonctionne

12/03/2014

Arrivé depuis maintenant plus d’un an chez Synbioz, j’ai eu l’occasion de travailler sur plusieurs projets avec plusieurs développeurs. En tant que webdesigner et intégrateur j’ai la possibilité de...

Une carte de France en SVG

06/02/2014

Bonjour à vous, aujourd’hui nous allons mettre à disposition une ressource bien pratique pour celles et ceux qui auraient besoin d’une carte pour leur application / site. Nous voyons de plus en plus...