Problème barre de progression inanimé

Fermé

vins94 Messages postés 57 Date d'inscription jeudi 18 juin 2009 Statut Membre Dernière intervention 6 mai 2011 - 20 juin 2009 à 18:04
vins94 Messages postés 57 Date d'inscription jeudi 18 juin 2009 Statut Membre Dernière intervention 6 mai 2011 - 22 juin 2009 à 20:09

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.

A voir également:

Problème barre de progression inanimé
Windows 11 barre des taches a gauche - Guide
Égal barré - Forum Bureautique
Barre verticale clavier - Forum Excel
Texte barré whatsapp - Guide
Barre clavier mac - Guide

4 réponses

Réponse 1 / 4

Alkaaran Messages postés 285 Date d'inscription dimanche 20 mai 2007 Statut Membre Dernière intervention 3 novembre 2009 37
22 juin 2009 à 10:17

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

Réponse 2 / 4

Alkaaran Messages postés 285 Date d'inscription dimanche 20 mai 2007 Statut Membre Dernière intervention 3 novembre 2009 37
22 juin 2009 à 08:47

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 ?

Réponse 3 / 4

vins94 Messages postés 57 Date d'inscription jeudi 18 juin 2009 Statut Membre Dernière intervention 6 mai 2011 20
22 juin 2009 à 08:59

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 :)

Réponse 4 / 4

vins94 Messages postés 57 Date d'inscription jeudi 18 juin 2009 Statut Membre Dernière intervention 6 mai 2011 20
22 juin 2009 à 20:09

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

Discussions similaires

Barre verticale droite sur clavier

Barre verticale droite sur clavier mac

Alt + = un égal barré = différence !

Comment faire le signe = barré?

Quelle touche clavier ou combinaison pour désigner "différent de

Discussions similaires

Newsletters