Accueil > > > 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
 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
- 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 !
 Sources de la même categorie
 Commentaires et avis
 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
|
Derniers Blogs
 MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ?MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ? par junarnoalg
La prochaine session de MyTIC aura lieu à Namur, le 23 mars prochain. Pendant presque une heure, nous parlerons de SharePoint 2010. Voici un aperçu du programme.
Accueil : 17h30 Début de la session : 18h00 - Les nouvelles int...
Cliquez pour lire la suite de l'article par junarnoalg [MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA par cyril
Le deuxième keynote du mix fut très riche en contenu. Internet Explorer 9 Juste un après le lancement de Internet Explorer 8, Microsoft a dévoilé les nouveautés de Internet Explorer 9. Désormais, IE supportera HTML5, SVG et CSS3. L'élément ...
Cliquez pour lire la suite de l'article par cyril CERTIFICATIONS BETA .NET 4CERTIFICATIONS BETA .NET 4 par KooKiz
Les inscriptions pour les certifications beta .NET 4 ont commencé. L'inscription est offerte pour les examens suivants : - 71-511, TS: Windows Applications Development with Microsoft .NET Framework 4 - 71-515, TS: Web Applications Development with...
Cliquez pour lire la suite de l'article par KooKiz [MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2[MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2 par redo
J'imagine que la plupart d'entre vous connaissent bien et utilisent le service de traduction de Google, mais connaissez-vous celui de Microsoft . Microsoft Translator ? Effectivement, Microsoft nous annoncé le lancement version 2 de la Technologie Preview...
Cliquez pour lire la suite de l'article par redo
Logiciels
 Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|