Dans la vie de tous les jours, nous voyons des barres de progression un peu partout. L'être humain est fait ainsi, nous aimons et nous devons savoir où nous en sommes car la nature est ainsi faite. Nous voulons savoir ou nous en sommes lors de l'installation d'un logiciel, lors de la compression d'un fichier, et même dans un file d'attente. L'utilité des barres de progression n'est donc pas à démontré. C'est donc pourquoi j'ai choisi de vous montrer comment en faire pour le web en CSS.Traduction et adaptation de : Bare Naked App | Displaying Percentage
Étape 1 : Le code
Avec cette méthode, l'utilisateur n'a que 2 images à charger. Le
conteneur et le contenu. Le conteneur est la partie fixe et le contenu
est l'image qui laisse voir la progression. C'est une solution facile
et légère. Voici donc le code XHTML et CSS :
XHTML:
<img xsrc="/images/percentImage.png" alt="9.5%" class="percentImage" style="background-position: -110.315px 0pt;" />
CSS:
img.percentImage {
background: white url(/images/percentImage_back.png) top left no-repeat;
padding: 0;
margin: 5px 0 0 0;
background-position: 1px 0;
}
Si vous maîtrisez votre XHTML/CSS, vous aller vous rendre compte qu'il
y a 2 images impliquées. La première, le conteneur, représente le
contour de la barre de progression. Le centre de cette image est
transparente.
La seconde image quant à elle, est une barre de couleur de votre choix
divisé en 2 partie de couleur différente. Le premier 50% est la couleur
qui représente la partie qui a été effectué et l'autre 50% représente
la partie restante.
Étape 2 : Comment faire ?
NOTE : l'attribut 'alt' du tag <img> représente le pourcentage que la barre de progression affiche à l'écran.
La largeur (width) de l'image est toujours en regard avec l'image de
fond qui est appliqué par le CSS. Sachant celà, nous pouvons
positionner l'image de fond dans le coin gauche et la régler à "no
repeat". Le "background-position" est mis à "1px" afin que les 2 images
s'assemble correctement. Vous pouvez toutefois la mettre un petit peu
plus large si vous le désirez.
Afin de faire avancer la progression de la barre, il vous suffit de changer la valeur de la position de la propriété "background-image".
<img xsrc="/images/percentImage.png" alt="9.5%" class="percentImage" style="background-position: -110.315px 0pt;" />
Ajouter cette page à votre Digg-Like préféré
Commentaires (1)
Ecrivez un commentaire
peux tu m'expliquer stp
merci d'avance