Comment animer une progress bar en CSS ?  

Partagé par GdArros le 12/08/2016  —  5 min de lecture

tutoriel-comment-animer-une-progress-bar-en-css
3 LIGHTS 2071 PERSONNES AIDÉES  

avatar GdArros   (Level 7)
Intérêt : Informatique

Ce tuto t'a aidé ? Partage-le !



Pré-requis pour ce tutoriel :

  • Un éditeur de texte
  • Un navigateur Internet
  • Connaître le HTML et le CSS


Créer la progress bar

Le HTML

Avant toute chose, il nous faut créer la progress bar. Eh oui, un peu compliqué d'animer une progress bar qui n'existe pas !

Pour ce faire, rien de plus simple :

<div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
      75%
    </div>
</div>

Ici, nous créons une div, avec une class que nous allons appeler « progress », qui va gérer le fond de notre progress bar (son background). A l'intérieur de celle-ci, nous en ajoutons une seconde qui représentera la progression de notre barre ; nous lui ajoutons les class « progress-bar » et « progress-bar-striped ». Nous définissons aussi un role « progressbar », la valeur actuelle de notre barre avec un aria-valuenow de 75, et ses valeurs de début et de fin avec un aria-valuemin et un aria-valuemax respectivement à 0 et 100.

A ce stade, tout ce qui s'affiche c'est le pourcentage que nous avons défini à l'intérieur notre seconde div : « 75% ».

Pour schématiser nous avons donc créé ceci en HTML :

div class="progress-bar progress-bar-striped active" div class="progress"

Vous noterez que nous n'avons pas utilisé les balises progress ou meter qui permettent, elles aussi, de créer des progress bars. Ce sont des balises de progress bars pré-designées très pratiques, qui laissent cependant moins de liberté à notre design. Vous comprenez donc le choix des div.

Le CSS

Bon, maintenant occupons-nous du CSS pour faire apparaître la barre.

Commençons par nous occuper du fond de notre barre (la première div) :

.progress {
    height: 20px;
    overflow: hidden;
    background-color: #F5F5F5;
}

Grâce à ce code nous lui indiquons, de haut en bas, de :

  • fixer sa hauteur par défaut à 20px,
  • ne pas dépasser les 100% maximum d'une progress bar,
  • prendre #F5F5F5 pour couleur d'arrière plan.

Ensuite, nous nous occupons du texte et de l'apparence de notre barre de progression (la seconde div) :

.progress-bar {
    width: 75%;
    font-size: 20px;
    color: #FFF;
    text-align: center;
    background-color: #E14444;
}

Avec ce code nous lui indiquons, de haut en bas, de :

  • fixer sa taille à 75% de la taille totale de notre div,
  • fixer la taille du texte à 20px,
  • mettre le texte en #FFF (blanc),
  • aligner le texte au centre de la div,
  • prendre #E14444 pour couleur d'arrière plan.

Voilà qui commence à prendre forme ! Nous avons enfin une progress bar visible. Il s'agit maintenant de la rendre un peu plus jolie...

Pour terminer la création de notre barre, ajoutons un peu de design avec des bandes régulières :

.progress-bar-striped {
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -moz-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 20px 20px;
}

Le code ci-dessus nous permet, de haut en bas, de :

  • mettre en place un « gradient », ou « dégradé » en français, de blanc — (255,255,255) en RGB — avec différents niveaux de transparence,
  • définir la taille des bandes régulières que nous voulons ajouter.

Note : les quatre premières lignes de CSS ont la même fonction, elles permettent simplement de s'adapter au navigateur utilisé : -webkit- pour Chrome et Safari, -moz- pour Mozilla, -o- pour Opera. Ce sont des « propriétés propriétaires ». Il en existe d'autres mais ce sont les plus connus.

Et voilà ! Nous avons maintenant une belle progress bar. Il ne reste plus qu'à l'animer !

Animer la progress bar

Commençons par ajouter les propriétés d'animation en CSS :

.progress-bar.active {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -moz-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}

Ici nous indiquons simplement au navigateur d'ajouter un animation de deux secondes, linéaire et infinie, appelée « progress-bar-stripes ». Plus vous augmentez la durée de l'animation, plus la progression de la barre sera lente.

Cependant, à ce stade, rien ne bouge… Que c'est frustrant ! Pourquoi ?? Tout simplement parce qu'il nous manque les « keyframes » qui vont donner les détails de l'animation au navigateur.

@keyframes progress-bar-stripes {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 0;
    }
}

Nous commandons donc au navigateur d'ajouter des « keyframes » sur l'animation répondant au nom de «  progress-bar-stripes » :

  • A 0% nous initialisons la position du background à 0 horizontalement et 0 verticalement.
  • A 100% nous positionnons le background à 40px horizontalement et à 0 verticalement.

Le background se décalera donc de 40px vers la droite. Pour faire l'inverse et décaler le background vers la gauche, il vous suffit de remplacer 40px par -40px.

Ca y est, notre progress bar s'anime enfin ! C'est fini !

J'espère que ce tuto vous aura été utile. Vous êtes désormais libre de modifier votre progress bar animée comme vous le souhaitez en adaptant le code à vos besoins.

Code

HTML

<html>
<head>
  <meta charset="UTF-8">
  <title>Ma super progress bar animée</title>
  <link href="progress-bar.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
      75%
    </div>
  </div>
</body>
</html>

CSS

.progress {
    height: 20px;
    overflow: hidden;
    background-color: #F5F5F5;
}
.progress-bar {
    width: 75%;
    font-size: 20px;
    color: #FFF;
    text-align: center;
    background-color: #E14444;
}
.progress-bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -moz-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-striped {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -moz-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 20px 20px;
}
@keyframes progress-bar-stripes {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 0;
    }
}

avatar GdArros   (Level 7)
Intérêt : Informatique

Ce tuto t'a aidé ? Partage-le !



Tu as toi aussi des astuces ou des compétences à partager ? Ou tu souhaites tout simplement apprendre ? Rejoins notre communauté en t'inscrivant !


Commentaires (0)

Connecte-toi ou inscris-toi pour rédiger un avis.

Lis aussi . . .

Par L'informaticien

  le 16/09/2017

Comment bloquer les pubs sur Android sans root

Salut tout le monde Dans cette vidéo, je vais vous montrer comment bloquer les pubs sur Android sans root

Par HFortier

  le 17/08/2019

Google Sheets - Graphique intégré à une cellule (fonction SPARKLINE)

Dans cette vidéo, je vais vous montrer comment réaliser un graphique à l'intérieur d'une cellule

Par GmR

  le 31/10/2016

Créer une feuille de papier vieillie et froissée avec GIMP

Créer une feuille de papier vieilli et froissée avec GIMP

Par HFortier

  le 02/12/2016

Stabiliser une scène avec Premiere Pro (sans After Effect)

Beaucoup l'ignore, mais il n'est pas nécessaire de passer par After Effect pour stabiliser une scène. Premiere Pro dispose du même algorythme ...

Par GdArros

  le 12/08/2016

Comment faire une redirection avec htaccess ?

Dans ce tutoriel nous allons apprendre comment faire une redirection avec htaccess facilement.

  Rejoins la communauté !


Tuto Aléatoire