problème barre de progression inanimé Fermé

Question

Bonjour,
Je suis depuis peu responsable d'un site qui utilise nuked clan que j'ai créé pour ma guilde sur world of warcraft, et j'ai trouvé sur un site http://www.guilde-enrage.com une barre de progression que je trouve assez sympa et j'aimerais faire la même chose. Malheureusement, avant d'avoir recours à ce forum j'ai jeté un œil sur pas mal d'autre et à chaque fois je me retrouve confronté à quelque chose que je ne comprend pas.

Un ami m'a dit "Pour la barre de progression, il faut hélas passer par du javascript :p . Je ne sais pas comment marche le JS, mais pour faire le code, c'est une boucle qui compte de 0 à 100, et tu n'as qu'à afficher un bloc dont la taille dépend du i : à 0, le bloc n'est pas visible, mais à 100 il a sa taille complète. Le HTML te permettras juste d'afficher un bloc, mais pas de "l'animer".

Je crois avoir compris ce qu'il veut dire grâce a ce site https://cssglobe.developpez.com/tutoriels/css/barre-progression-animee-css-pur/ mais je ne serais pas le faire. C'est pour cela que je fais appel a vous.

Je ne souhaite pas que ma barre soit "animer". J'aimerais qu'elle ressemble à ça : http://www.gazetteonline.com/graphics/progress_bar.gif et que de 0 à 25 % elle soit rouge, de 25 à 50 % orange,  de 50 à 75 % jaune et de 75% à 100% vert. Je dois utiliser un block html mais je ne sais pas les lignes à écrire ni comment faire en sorte que cette barre soit visible.
Je vous remercie d'avoir lu mon problème.

Alkaaran · Accepted Answer

Alors pour cela tu mettra un dans un autre Pour changer la progression tu mettras width avec ton pourcentage et ce que tu m'a dit plus tot pour l'id : de 0 a 25 : progress0 de 25 a 50 : progress25 de 50 a 75 : progress50 de 75 a 100 : progress75 ensuite ca devient du css : span.progressbar { border:solid 1px #666; background:white; height:20px; width:160px; } span.inner_progressbar { background-image:url("../img/bg50.png"); background-repeat:repeat-x; } span#progress0 { background:#f00; } span#progress25 { background:#fc0; } span#progress50 { background:#ff0; } span#progress75 { background:#0f0; } Il faut que tu mette cette image http://img31.yfrog.com/img31/4465/bg50.png pour que ca fasse un peu plus "stylé", tu la met dans /themes/wow_horde/img

Alkaaran · Answer

Re, c'est ton sauveur dévoué ^^

Ta barre de progression tu la veut animée ou pas finalement par ce que j'ai pas tout compris à ta demande :p

Plus encore, compte-tu que sa progression change souvent, ou la changera tu manuellement ?

vins94 · Answer

Coucou ^^ merci =) alors je souhaite pas qu'elle soit annimé, et je veux la changer manuellement.
Par exemple il faut tuer 17 boss dans une instance, je prendrais mon pourcentage par rapport a quel boss j'en suis et je l'indiquerait. Je trouve que c'est plus jolie avec une barre de progression. Tu vois ce que je veux dire ou pas ?
Je vais passer mon bac français, a toute à l'heure :)

vins94 · Answer

Haaaaa ça me rend fou, j'arrive a rien :/ j'ai mit dans un autre block html. Ensuite j'ai été dans /themes/wow_horde/img et j'ai mit ton image bg50 et mon image progress_bar.gif Ensuite j'ai été dans thèmes/wow_horde/style/style.css et j'ai collé tes lignes rien ne se passe. Si tu veux esseyé je te passe mon ftp

Problème barre de progression inanimé

4 réponses

Discussions similaires