Dksprogressbar : une progressbar imagée qui change de couleur selon la progression
Soyez le premier à donner votre avis sur cette source.
Vue 14 292 fois - Téléchargée 755 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/
N'hésitez pas à me faire des remarques, c'est le premier script que je poste sur javascriptfr !
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 !
2 nov. 2008 à 20:57
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
1 févr. 2008 à 11:48
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
22 janv. 2008 à 21:24
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 :(.
22 janv. 2008 à 21:02
22 janv. 2008 à 20:24
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.