Barre de progression animée en CSS pur

| Alen Grakalic | traduit par Michel Rotta |

Cet article est la traduction de : Angled content mask with CSS.
Retrouvez toutes les traductions de CSS Globe disponibles sur cssglobe.developpez.com.
Ceci est une simple démonstration de comment vous pouvez créer une barre de progression animée en CSS pur. Le système est très simple. Nous avons besoins de 3 éléments : un "container" et deux imbriqués.

- Titre : Barre de progression animée en CSS pur

- Auteurs : Alen Grakalic, traduit par Michel Rotta

- Parution : 22 février 2011

- Licence : Copyright ® 2011 Alen Grakalic. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Le concept

- Le balisage

- Animation

- Le placement de la balise em

- Démo et téléchargement

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.

<dd>
<span><em style="left:100px">50%</em></span>
</dd>

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.

Démo et téléchargement

Vous pouvez voir une démo en ligne ou télécharger l'archive.