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 1583 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 johnart23

  le 30/07/2017

Comment télécharger une musique ou une playlist sur Deezer avec Allavsoft Downl

Dans ce tutoriel, je vais vous apprendre comment télécharger une musique ou une playlist de musiques sur Deezer avec Allavsoft Downloader...

Par L'informaticien

  le 17/04/2018

Réparer, Nettoyer, Optimiser et Protéger votre ordinateur

Salut mes frères / soeurs Dans ce tuto je vais vous expliquez Comment Réparer, Nettoyer, Optimiser et Protéger votre ordinateur

Par johnart23

  le 01/02/2017

Fix pour supprimer la réinitialisation des applications par défaut sur Windows 10

Dans ce tutoriel, vous allez apprendre comment utiliser le Fix pour supprimer la réinitialisation des applications par défaut sur Windows 10

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 ThibaudArros

  le 26/01/2017

Comment intégrer un bandeau d'usage des cookies sur son site web ?

Vous utilisez un service usant de cookies, comme Google Analytics ? Intégrez à votre site la bannière informant vos visiteurs de leur utilisation.

  Rejoins la communauté !


Tuto Aléatoire