Problème barre de progression inanimé
vins94
Messages postés
57
Date d'inscription
Statut
Membre
Dernière intervention
-
vins94 Messages postés 57 Date d'inscription Statut Membre Dernière intervention -
vins94 Messages postés 57 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Problème barre de progression inanimé
- Windows 11 barre des taches a gauche - Guide
- Barre de défilement - Guide
- Barré whatsapp - Guide
- Barre verticale mac - Forum MacOS
- Barre clavier - Forum Excel
4 réponses
Alors pour cela tu mettra un <span> dans un autre
<span class="progressbar"><span class="inner_progressbar" id="progress50" style="width:60%"></span></span>
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 :
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
<span class="progressbar"><span class="inner_progressbar" id="progress50" style="width:60%"></span></span>
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
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 ?
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 ?
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 :)
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 :)
Haaaaa ça me rend fou, j'arrive a rien :/
j'ai mit <span class="progressbar"><span class="inner_progressbar" id="progress50" style="width:60%"></span></span> 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
j'ai mit <span class="progressbar"><span class="inner_progressbar" id="progress50" style="width:60%"></span></span> 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
