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
 [DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE[DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE par tja
C'est le dernier principe des principes du Design Orienté Objet (The Principles of Object Oriented Design) fondés par Robert C. Martin plus connu sous le pseudonyme d'Uncle Bob.
l'image empruntée de LosTechies.
Je ne traite pas les principes dans...
Cliquez pour lire la suite de l'article par tja TECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURSTECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURS par ROMELARD Fabrice
Animé par: Laurent Cotton Le développement dans SharePoint 2010 passe par plusieurs axes qui seront évoqués dans cette session, mais plus particulièrement les développements simples lié au besoin Business Business Connectivity Services Ce BCS es...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOURTECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice
Cette session est la dernière pleinière de ces 3 jours de TechDays Paris 2010. Généralement, cette troisième journée est plus axée sur l'avenir vu par Microsoft. Après un retour sur l'avenir vu par la Science Fiction ou par ...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|