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 1346 PERSONNES AIDÉES  

avatar GdArros   (Level 6)
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 6)
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 GmR

  le 02/11/2016

Comment faire des tutos sous Linux : 02 - La prise de vue

Comment faire des tutos sous Linux : 02 - La prise de vue

Par HFortier

  le 17/03/2018

Productivité : Comment ouvrir plusieurs liens en un seul clic (Chrome)

Aujourd'hui je vous propose de découvrir une extension Chrome super pratique, qui permet d'ouvrir plusieurs liens en une seule manipulation.

Par johnart23

  le 05/03/2017

GT Text 2/2 - Test approfondi

Dans ce tutoriel, on va étudier GT Text en profondeur : mise en français, changement de tailles, de polices de caractères, insertion d'image, tableau

Par johnart23

  le 05/08/2017

artv.watch, la télé sur Internet - Chaînes françaises

Dans ce tutoriel, vous allez apprendre comment regarder la télé sur votre pc...

Par L'informaticien

  le 23/03/2018

Enlever le mot de passe schéma pour débloquer les Smartphones,Tablettes Android

Salut les amis Dans ce tuto je vais vous expliquez Comment Enlever le mot de passe schéma pour débloquer les Smartphones,Tablettes Android

  Rejoins la communauté !


Tuto Aléatoire