Bar de progression animé web 2.0 en CSS seulement

Voici ici la démonstration de ce que notre ami CSS et XHTML peut faire lorsqu'on a un peu d'imagination. Avez-vous déjà pensé créer une barre de progression animée, mais sans réelle programmation que quelques lignes de CSS et de XHTML ? Alors, voici pour vous comment effectuer ce remarquable effet.

50%

Le concept

Nous avons donc besoin de 3 éléments :

• 1 conteneur
• 2 éléments imbriqués

Nous allons donc mettre une image de fond animé dans le conteneur et nous allons définir la largeur et la hauteur de celui-ci. Ensuite l'élément imbriqué <span>, sera la ligne de progression en elle-même. Le second élément imbriqué quant à lui se situe juste au bout de la barre de progression et sera déplacé vers la gauche afin de cacher la barre de progression selon le % effectuée.
 
 

Le code XHTML et CSS

Rien de plus simple, 3 lignes et le tour est joué.
<dd>
   <span><em style="left:100px">50%</em></span>
</dd>
J'ai décidé dans le cas ici présent de mettre la partie CSS à même l'élément. Cela est plus parlant pour l'exemple suivant et il sera plus facile avec PHP par exemple de modifier cette valeur.
 

L'animation

Comment le tout est-il animé ? Nous avons ici utilisé un GIF animé pour l'effet d'animation. Mais ce n'est pas tout. Rappeler vous bien de cela! L'élément <span> a 200 px de largeur. La barre de progression arrête là ou l'élément <em> se situe. Donc si on veut obtenir une barre de progression de 50%, il faut attribuer la valeur 100px à l'élément <em>. Simple non ?