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

Télécharger le projet
Commenter

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 !
Télécharger le projet

Codes Sources

S'inscrire maintenant

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.

Du même auteur (cs_DARKSIDIOUS)