DKSPROGRESSBAR : UNE PROGRESSBAR IMAGÉE QUI CHANGE DE COULEUR SELON LA PROGRESSION progressbar, image, progression, chargement, couleurs, Source N°45472

Information sur la source

Catégorie :Graphique Classé sous : progressbar, image, progression, chargement, couleurs Niveau : Débutant Date de création : 20/01/2008 Vu / téléchargé: 5 029 / 254

Auteur : DARKSIDIOUS

Site perso

Ecrire un message privé

Ce membre participe au partage de revenus publicitaires

Note :

4,50 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (13)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

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>

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 !

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

dksProgressBar.js 1 233 octets

Télécharger le zip

Sources du même auteur

Toutes les sources de DARKSIDIOUS

Sources de la même categorie

Toutes les sources de la catégorie Graphique

Sources en rapport avec celle ci

Commentaires

Commentaire de mickaelpfr le 21/01/2008 09:36:03

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 . . .
Commentaire de DARKSIDIOUS le 21/01/2008 12:58:54 administrateur CS

Si tu regarde dans le code, tu verra un "setPercentage" qui permet de définir le pourcentage de progression.
Commentaire de mickaelpfr le 21/01/2008 13:43:05

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
Commentaire de mickaelpfr le 21/01/2008 13:52:14

pas eu la possibilitée d'éditer mon message , voici la source dont je te parlais :
http://www.javascriptfr.com/code.aspx?ID=37087
Commentaire de Arto_8000 le 21/01/2008 15:46:52

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.
Commentaire de DARKSIDIOUS le 21/01/2008 21:51:05 administrateur CS

Le but de cette source n'est pas de montrer la progression du chargement des images, mais juste faire une progressbar : vous pouvez la remplir comme vous voulez (il suffit de lui indiquer quel pourcentage vous voulez afficher) c'est tout. Il n'y a aucune particularité concernant le chargement des images (ce ne sont que les images qui sont affichées pour simuler un progressbar).

Donc mickaelpfr, t'avais raison : je me base sur rien pour faire ma barre de load : c'était le but :p

par contre, arto_8000, tu peux m'expliquer pourquoi se charge jusqu'à trois fois les images ? Je suis en train de faire un jeu de carte en pur javascript (comme worldofsolitaire.com) que je déposerais ici lorsqu'il sera fini, et ce script me permet justement d'afficher une progressbar lors de la mise en cache des images (et je vous rassure, le préchargement des images est bien plus évolué qu'ici ;) et j'aimerai l'optimiser, donc du coup si pour un script aussi peu évolué, je charge déjà 3 fois les mêmes images, cà part mal !
Commentaire de Arto_8000 le 22/01/2008 02:10:07

Je sais pas pourquoi ils sont chargé trois fois, mais quand j'ouvre Firebug et que je regardes les requêtes faites, je vois que les images sont requester plusieurs fois. Firebug c'est l'outil à tout faire pour les dévellopeur web, tu devrais le télécharger et tu verras par toi même. Laisse rouler ton script pendant un petit temps et de nouvelles requêtes apparaissent ... ceux là pas voulu.

Et en passant tant qu'à juste faire une animation de chargement ...

<html>
<head>
<script type="text/javascript" language="Javascript">
var p=0;
function a()
{
   document.getElementById("d").style.width = 1 + (p++) * 2 + "px";
   if (p != 100)
       setTimeout("a()", 25);
}
</script>
</head>
<body onload="a()">
    <div style="width: 200px; height: 15px; background-color: #000">
        <div id="d" style="width: 0px; height: 15px; background-color: #333"> </div>
    </div>
</body>
</html>

Ça aussi ça fait juste une animation de chargement ...
Commentaire de DARKSIDIOUS le 22/01/2008 06:25:53 administrateur CS

Le but est tout de même d'afficher une image différente selon la progression : ici j'utilise 11 images avec une couleur différente pour simuler une progression passant du rouge au vert sans que ca soit réellement perceptible. Mais c'est sûr qu'au final mon code ressemble au tiens pour afficher une progression avec une simple couleur.
Commentaire de mickaelpfr le 22/01/2008 10:09:36

Bon hé bien sans paul et mickey , modifis la description ça t'évitera quelques autres commentaires désagréable ;) mais bonne initiative quand même que le partage de ta source :)
Commentaire de TheSin le 22/01/2008 20:24:23

Dommage, ça ne marche pas avec IE7 Vista tandis que FF no soucis ....
Commentaire de DARKSIDIOUS le 22/01/2008 21:02:40 administrateur CS

tiens, ca marche pas avec IE7 ??? Quelle est l'erreur au juste ?
Commentaire de TheSin le 22/01/2008 21:24:21

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 :(.
Commentaire de the_wwt le 01/02/2008 11:48:54

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

Ajouter un commentaire

Discussions en rapport avec ce code source

chargement d'une image par syphaxx

Chargement sous ie par titouchpa

chargement d'image par Paladin2107

Afficher un message pendant le chargement d'une image par mickaelpfr

Chargement automatique d'une image par bumblebee

Chargement d une image par adakick

Barre de progression - Etat d'avancement lors d'un affichage d'image.. par Mastronic

Problème chargement image javascript par Travailleuuse06

Icone de chargement pour image par porciner

Attendre chargement image par sisi231