Utilisez une barre de progression en CSS3

9 mai 2011

La barre de progression est peu utilisée sur le web. Elle peut tout de même s’avérer être utile pour indiquer l’état d’avancement d’une tâche comme la durée d’animation d’un slider automatique… Galen Gidman, un webdesigner américain, nous propose de superbes barres de progression en utilisant uniquement des propriétés CSS !

La structure

On commence par déclarer la structure HTML de la barre avec une première classe CSS pour définir la barre de progression et une deuxième pour définir sa couleur.

<div class="progress-bar blue"></div>

Ensuite, tout se passe dans le CSS. On génère la forme du bloc qui va accueillir la barre de progression : border-radius permet d’arrondir les bordures, et box-shadow de générer une ombre portée pour créer un effet de profondeur.

.progress-bar { 
	width: 300px;
	height: 24px;
	padding: 4px;
	background-color: #191919;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
	-webkit-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
	-moz-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
}

Résultat :

La barre

Ensuite, on crée la barre de progression en utilisant la pseudo-classe CSS « before » avec « content » qui permet d’insérer un texte ou une image avant le premier contenu d’un élément HTML. Ici, on a pas besoin de contenu, donc on déclare un « content » vide. On met une couleur en background pour mettre en avant la barre de progression.

.progress-bar:before { 
	content: '';
	display: block;
	position: absolute;
	width: 200px;
	height: 24px;
	background: #999;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
}

Résultat :

Les rayures

Maintenant il faut créer les rayures de la barre de progression. Pour cela, on utilise la pseudo-classe CSS « after » qui permet d’insérer un texte ou une image à la fin du contenu d’un élément HTML. Ici, on déclare un « content » avec des barres. Ce sont ces barres qui vont faire office de rayures. On utilise la propriété CSS3 « transform » avec la transformation « skew » qui permet d’appliquer une inclinaison sur un élément HTML.

.progress-bar:after { 
	content: '|||||||||||||';
	display: block;
	position: absolute;
	width: 200px;
	height: 24px;
	overflow: hidden;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	transform: skewX(-30deg);
	-webkit-transform: skewX(-30deg);
	-moz-transform: skewX(-30deg);
	-o-transform: skewX(-30deg);
	font: bold 120px/80px sans-serif;
	letter-spacing: -6px;
	color: #000;
	opacity: 0.06;
}

Résultat :

La couleur

Et enfin, on utilise la deuxième classe CSS de notre élément HTML pour générer la couleur finale avec la propriété CSS3 « gradient ».

.blue:before { 
  background: #099;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#099), to(#006A6B));
  background: -moz-linear-gradient(top, #099, #006A6B);
}

Résultat :

C’est terminé. Vous avez une superbe barre de progression, uniquement avec du CSS !

Requis : navigateur compatible CSS3
Démonstration : http://lab.galengidman.com/progress-bars/
Licence : aucune

Commentaires

  • Simo19922

    Bravo, pour ce site, que je trouve génial surtout au niveau désign ! bonne chance à toi …

  • Très jolies ces barres…

  • J’ai un probleme,

  • Bonjour, j’ai un souci avec ce code.
    La barre en question se trouve dans un bloc sur mon site avec une propriété overflow:auto;
    Ainsi lorsque je scroll avec la molette de la souris pour dévoiler mon contenu jusqu’à la fameuse barre et bien celle-ci se déplace avec le scroll. (seulement la barre bleue, le fond noir reste en place)
    Elle se décale donc du fond noir.

    Avez vous une solution pour ce problème ?

    • Sans le code sous la main, je ne peux pas t’aider. Peux-tu mettre ton problème en ligne ?

  • John

    Hello, désolé, je ne suis pas un expert en CSS, mais si je veux utiliser sur une même page plusieurs barres avec différents états d’avancement, je suis obligé de créer X fois tout ce code CSS avec des noms différents (du genre progress-bar01, progress-bar02, etc.) ?
    Merci pour ta réponse :)

    • Tu peux toujours factoriser le CSS en définissant une classe qui regroupe les propriétés communes des barres, puis utiliser des id CSS pour les propriétés qui gèrent un état d’avancement différent.

      • John

        ok, c’est ce que je suis un peu arrivé à faire en trifouillant les CSS et en externalisant l’avancement de la barre de couleur sur la page web et non sur la CSS (ce sont des feuilles basiques d’un blog, donc la liberté d’action est assez restreinte). J’espère que c’est compréhensible :S
        Merci pour tout !

        • Paul

          Hello John, peux-tu partager ton code ? Je suis curieux de voir comment tu as externalisé la progression dans le HTML. Merci !

  • Doli

    Mais est-il possible que la barre progresse ?

    • Tout à fait, en rajoutant une couche de jQuery ;-)

  • Nagi

    Peut-on modifier la taille ?

  • Jamita

    Salut…

    Plutôt novice, je suis entrain de créer mon site pour ma webradio, et j’y ai incrusté cette barre de progression afin de pouvoir suivre l’avancement des dons!

    Mon seul soucis, si je ne me suis pas trompé, c’est que j’ai modifié les couleurs de la barre dans la partie .blue:before… Elle apparait correctement sur Firefox, mais sur Chrome et Internet Explorer, c’est la couleur d’origine qui reste… Ai-je oublié quelque chose? Est-ce du aux couleurs qui ne fonctionnent pas sur ces navigateurs (me parait impossible puisque le code couleur est lui accepté pour mon lecteur)…

    Si quelqu’un à une idée ou rencontré le même soucis!

    Merci à vous!!!

  • Raff JAMES

    Bonjour
    Je travail sur ionic framework, et souhaite mettre un genre progess-bar pour mesure l’humeur. En déplaçant le curseur de gauche à droite, l’émoticon change en passant d’un émoticon triste à un émoticon souriant.Tout ceci uniquement en css et html. Merci de votre aide!