Comment créer une barre de progression animée en CSS
Date de publication : 17/04/2008
Par
Alen Grakalic (CSS Globe)
Rodrigue Hunel (traducteur) (Rodrigue Online)
Cet article a pour but de vous donner une technique pour créer une
barre de progression animée en utilisant que du code CSS.
Introduction
Le concept
Le code (X)HTML
L'animation
Le positionnement de la balise em
Remerciements
Introduction
Voici une astuce, très simple, vous montrant comment créer une
barre de progression animée en n'utilisant que du CSS. Pour la mettre
en oeuvre, nous avons besoin que de trois éléments : un conteneur
et deux balises imbriquées.
Le concept
Nous devons personnaliser notre conteneur afin de lui mettre une
belle image en arrière-plan et fixer sa largeur et hauteur. La
première balise (span) sera la barre de progression. Ensuite,
nous devons absolument positionner la seconde balise (em)
au-dessus de la barre de progression et la décaler à gauche avec
une valeur prédéfinie. La balise em a le même arrière-plan
que le conteneur donc il donne un effet d'arrêt de la barre de
progression à un certain pourcentage.
Le code (X)HTML
Pour que ce soit assez clair, j'ai utilisé une liste de définition
avec plusieurs valeurs. Pour une seule barre de progression, vous
pouvez utiliser la balise de votre choix. J'ai une préférence pour
les paragraphes, donc j'ai utilisé la balise p dans mon exemple.
| Code (X)HTML de la liste de définition |
<dd>
<span><em style="left:100px">50%</em></span>
</dd>
|
J'ai décidé de gérer le positionnement à gauche de la balise
em en définissant son style avec la méthode inline (c'est-à-dire
directement dans le code (X)HTML). C'est beaucoup plus simple d'écrire
les valeurs au même endroit assez rapidement.
L'animation
Comment fonctionne-t-elle ? Avec un gif animé bien sûr. Vous vous
en souvenez ? La balise span a un large arrière-plan de
200px au format gif qui s'anime de 0 à 200px. Peu importe le pourcentage
que nous utilisons, il avancera de toutes manières et s'arrêtera.
L'effet d'arrêt à un certain pourcentage est mis en place avec
la balise em que j'ai mentionnée plus tôt.
Le positionnement de la balise em
Dans mon exemple j'utilise une barre de progression de 200px de
large. L'élément em a également la même largeur. Donc chaque
pourcentage est de 2px de large. Si nous voulons changer la largeur
de la balise em, nous devons multiplier son pourcentage par 2,
i.e. un pourcentage de 50% signifie un décalage sur la gauche de 100px,
24% pour un décalage de 48px, 75% pour 150px, etc., et vous
obtenez l'effet voulu.
Remerciements
Tous mes remerciements à
JauB
et
jeepnc
pour leur relecture.
| (1) |
Cet article a été publié à l'origine en anglais à l'adresse suivante :
Pure CSS Animated Progress Bar
|
Copyright © 17/04/2008 CSS Globe. 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'à 3 ans de prison et jusqu'à 300 000 E
de dommages et intérêts.
Cette page est déposée à la
SACD.
