Dksprogressbar : une progressbar imagée qui change de couleur selon la progression

Soyez le premier à donner votre avis sur cette source.

Vue 13 748 fois - Téléchargée 728 fois

Description

Voici une petite progressbar toute simple mais dont l'effet est très sympa : il s'agit de remplacer l'image de progression par une autre selon le pourcentage d'avancement, effet garantit !

Dans cet exemple, j'ai pris 11 images du style MAC, allant du rouge au vert.

Elle est très simple à intégrer à un site, facilement personnalisable (largeur, hauteur, images à afficher) et très légére (un peu plus de 1 Ko !).

Vous pouvez voir une démo ici : http://dark-sidious.chez-alice.fr/dksProgressBar/

Source / Exemple :


Voici le code pour l'intégrer à votre page :
<html>
    <head>
        <script type="text/javascript" src="./js/dksProgressBar.js"></script>
<script type=text/javascript>
    var percent = 0;
	var dksProgressBar = null;
	var increment = true;

	var options = {
        height : 11,
        width : 253,
        progressBarImages : new Array("ressources/progressBar0.png",
                                      "ressources/progressBar1.png",
                                      "ressources/progressBar2.png",
                                      "ressources/progressBar3.png",
									  "ressources/progressBar4.png",
                                      "ressources/progressBar5.png",
                                      "ressources/progressBar6.png",
                                      "ressources/progressBar7.png",
									  "ressources/progressBar8.png",
                                      "ressources/progressBar9.png",
									  "ressources/progressBar10.png"),
    }

	function initialize() {
		dksProgressBar = new DksProgressBar(window.document.getElementById("progressBar"), 0, options);
		incrementPercent();
	}

	function incrementPercent() {
	    if (increment) {
			if (percent < 100) {
				percent++;
			} else {
				increment = false;
				percent--;
			}
		} else {
			if (percent > 1) {
                percent--;
            } else {
                increment = true;
                percent++;
            }
		}
		dksProgressBar.setPercentage(percent);
		setTimeout("incrementPercent()", 25);
	}
</script>
    </head>
    <body onload="initialize();">
        <div id="progressBar"></div>
    </body>
</html>

Conclusion :


N'hésitez pas à me faire des remarques, c'est le premier script que je poste sur javascriptfr !

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
mardi 29 juillet 2008
Statut
Membre
Dernière intervention
2 novembre 2008

bonsoir,
je suis nouveau dans la création de site et j'aimerai mettre une progressbar sur mon site en dreamweaver cs3 qui comporte dans l'immédiat q'une page d'accueil.
je cherche depuis 2 jour comment faire, mais aucun tutoriaux concrets sont disponiblent
je bidouille donc sous flash avec des bouts de codes enregistré en flash que j'importe dans dream mais rien de réellement efficace.
je suis plus graphiste dans l'ame que programmeur j'y vais à mon rythme...

auriez vous un tutorial concret pour une progressbar sur un site dreamweaver cs3

Bien cordialement
Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
1
Bonjour,
Le rendu est sympa bien joué.
Seul bémol c'est géré avec des images, j'ai déposé une source entièrement OO qui a à peu près le même rendu en pur javascript.
http://www.javascriptfr.com/codes/PROGRESS-BAR-WIDGET_45586.aspx
Bonne continuation,
Pierrick
Messages postés
331
Date d'inscription
mardi 12 novembre 2002
Statut
Membre
Dernière intervention
10 février 2009

J'ai oublié de préciser que c'est la Démo mise en ligne que j'ai testé.
Sinon, comme d'habitude avec IE c'est un objet attendu, ligne 72 caractère 1.
En espérant pouvoir lire une compatibilité du code, sinon exit et ça serait dommage :(.
Messages postés
15814
Date d'inscription
jeudi 8 août 2002
Statut
Modérateur
Dernière intervention
4 mars 2013
102
tiens, ca marche pas avec IE7 ??? Quelle est l'erreur au juste ?
Messages postés
331
Date d'inscription
mardi 12 novembre 2002
Statut
Membre
Dernière intervention
10 février 2009

Dommage, ça ne marche pas avec IE7 Vista tandis que FF no soucis ....
Afficher les 14 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.