CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 11 05:02:39

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Graphique

> DKSPROGRESSBAR : UNE PROGRESSBAR IMAGÉE QUI CHANGE DE COULEUR SELON LA PROGRESSION

DKSPROGRESSBAR : UNE PROGRESSBAR IMAGÉE QUI CHANGE DE COULEUR SELON LA PROGRESSION

Information sur la source

Note :

4,50 / 10

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

Auteur : DARKSIDIOUS

Ecrire un message privé

Ce membre participe au partage de revenus publicitaires

Commentaire sur cette source (14)

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

Les Membres Club peuvent 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

DKSDRAGDROP : UNE BIBLIOTHÈQUE DE DRAG AND DROP ET DE GESTIO...

FREECELL : LE JEU DE FREECELL DE WINDOWS

Toutes les sources de DARKSIDIOUS

Sources de la même categorie

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma

CALCULATRICE HEURE par m22001111

DRAG & DROP VERS UN CANVAS par kazma

ROTATION D'UNE IMAGE, ANIMATION par william voirol

Toutes les sources de la catégorie Graphique

Sources en rapport avec celle ci

DIAPORAMA SIMPLE PAR IFRAME par sartoz

PROGRESS BAR WIDGET par the_wwt

PRECHARGEMENT D'IMAGE(S), AVEC BARRE DE PROGRESSION ( DIFFÉR... par wizard512

BARRE DE CHARGEMENT par stfou

BARRE DE PROGRESSION MODULABLE par vbbreizh

Commentaires et avis

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

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 6/10

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

Commentaire de ludovique le 02/11/2008 20:57:27

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

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

chargement d'une image [ par syphaxx ] Je cherche a afficher une image l'orsque le client selectionne celle-ci dans dans un champ <input type="file" >Je suppose que cela est faisable Chargement sous ie [ par titouchpa ] Bonjour à tous , à travers la fonction suivante je charge une image dans le bloc central, en reduisant la taille de l'image source. funct chargement d'image [ par Paladin2107 ] Bonjour à tousJ'ai un petit soucis pour afficher une image dynamiquement. Lorsque un utilisateur choisi son image à l'aide d'un bouton parcourrir je s Afficher un message pendant le chargement d'une image [ par mickaelpfr ] Bonsoir :)Je cherche le moyen , lors d'un click sur une image miniature par exemple , d'afficher une div avec un message d'attente pendant que l'image Chargement automatique d'une image [ par bumblebee ] Je cherche a afficher une image l'orsque le client selectionne celle-ci dans dans un champ <input type="file" >Je suppose que cela est faisable Chargement d une image [ par adakick ] Bonjour, Sur mon site j'ai des images assez lourde et je voudrais qu'en attendant que ces images se chargent en affiché d autre du genre : <img title Pré-chargement d'image [ par BOBART1 ] Bonsoir, j'ai un petit soucis en ce qui concerne le pré chargement je ne sais pas comment précharger une image avec une adresse externe type http://ww Barre de progression - Etat d'avancement lors d'un affichage d'image.. [ par Mastronic ] Bonjour, Est'il possible avec le javascript, d'avoir un etat d'avancement visuelle d'un chargement de fichier ( image par ex) .Une barre de progressio Icone de chargement pour image [ par porciner ] Bonjour,Je cherche une méthode pour afficher, lors du chargement de certaines images d'une page, une petite icone gif à la place de l'image en questi Chargement dynamique d'images [ par Kevin.Ory ] Bonjour à tous,Je voudrais créer une galerie d'image avec un effet de fondu lors du changement de l'image affiché. Hors je ne voudrais pas précharger

Nos sponsors

Derniers Blogs

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi

WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson

Forum

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

RE : CREATION DE SCORING OU RATING par Alex16000

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011