Note: idée de "Track your progress (or Lack thereof)".
Etape 1: préparez vos images
Votre image doit se répéter horizontalement, mais vous pouvez aussi choisir d'utiliser une couleur. Voici deux fonds que vous pouvez utiliser : 
Etape 2: le code HTML
C'est très simple, on utilise deux divs, une pour faire la bordure extérieure avec une taille fixe et une à l'intérieur avec la taille variable en pourcentage. Pour changer la progression, il suffit de changer le pourcentage! :)
<div class="prog-border">
<div class="prog-bar" style="width: x%; text-align: center;">
x%
</div>
</div>
Etape 3: styler tout ça
La partie la plus importante, le CSS ! Ajoutez ceci dans votre feuille de style :
.prog-border {
width: 200px;
height: 20px;
background: #FFF;
padding: 3px;
border: 1px solid #DDD;
}
.prog-bar {
height: 20px;
background: url(progress_bar_background.gif) repeat-x;
/* utilisez une couleur ou une image de fond */
}
Voilà, vous obtenez ceci :
Facile non?
