Le concept▲
Nous allons mettre une image de fond sympathique dans le "container" et définir la largeur (width) et la hauteur (height). Le premier enfant (span) aura pour fonction de représenter la barre de progression. Nous allons positionner le second enfant (em) en absolu par-dessus la barre de progression et lui donner une position gauche à la valeur d'arrêt désirée. L'élément em à le même fond que le "container" ainsi il donne un effet d'arrêt de la barre de progression à un certain pourcentage.
Le balisage▲
Pour conserver ceci aussi beau que possible, j'ai utilisé une balise HTML de définition de list (dl) pour plusieurs valeurs. Pour une barre de progression vous pouvez utiliser autant d'élément que vous le désirez. J'aime beaucoup la balise paragraphe, c'est pourquoi j'ai utilisé la balise (p) dans mon exemple.
J'ai décidé d'utiliser les styles directement dans le HTML pour le placement de la balise em. C'est plus pratique d'écrire toutes les valeurs depuis le même endroit.
Animation▲
Comment est-elle faite ? En utilisant un gif animé bien sûr.
Vous vous rappelez de ça ? La balise span a comme image de fond un gif animé d'une largeur de 200px.
Ceci ne tient aucunement compte du pourcentage que nous voulons utiliser, l'animation se déroule entièrement et s'arrête.
L'effet d'arrêt à un pourcentage donné est basé sur la balise em comme je l'ai mentionné ci-dessus.
Le placement de la balise em▲
Dans mon exemple, j'utilise une barre de progression de 200 pixels de large. L'élément em a aussi 200px de large. Ainsi chaque pourcentage représente 2px de large. Si nous voulons précisément donner sa valeur à la balise em nous devons multiplier le pourcentage par 2. Exemple : 50% va donner 100px, 24% donnera 48px, 75% sera représenté par 150px, etc. Vous voyez l'image.