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

Soyez le premier à donner votre avis sur cette source.

Vue 13 627 fois - Téléchargée 712 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

mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2 -
je n'ai pas vue en quoi ta barre indiquait une progression ?
c'est juste une animation !
ou alors il manque une subtilité ....

je note 3 . . .
cs_DARKSIDIOUS
Messages postés
15815
Date d'inscription
jeudi 8 août 2002
Statut
Modérateur
Dernière intervention
4 mars 2013
82 -
Si tu regarde dans le code, tu verra un "setPercentage" qui permet de définir le pourcentage de progression.
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2 -
je viens de regarder ta source en entier et effectivement , tu ne t'appuis sur rien pour faire ta barre de load, uniquement sur un nombre d'éléments ...
Pour pouvoir faire une vrai barre de chargement d'images il aurait fallut que tu ajoutes une fonction de vérification de chargement de chaque image via la méthode .complete , regarde sur ce site il y a une fonction qui indique le chargement du nombre d'images :)

Bon courage
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2 -
pas eu la possibilitée d'éditer mon message , voici la source dont je te parlais :
http://www.javascriptfr.com/code.aspx?ID=37087
Arto_8000
Messages postés
1051
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
5 -
Comme ça été dit précédemment tu te bases sur rien pour à savoir si tes images sont chargés. Peut-être que tes images sont encore en chargement alors que la bar indique qu'elles sont toutes chargées. Aussi tu ne devrais pas utiliser l'événement onLoad, depuis un bon bout il y a l'événement onDOMContentLoaded qui est plus approprié pour ce genre de script. Et tant qu'à seulement mettre les images en cache pourquoi pas utiliser AJAX au lieu d'une méthode que je doutes de l'efficacité.

Je ne sais pas si c'est un bug ou voulu, mais sur ton site de démo les images sont chargées jusqu'à trois fois.

Il reste encore du travail et bonne chance.

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.