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