Plugin jquery : progress bar

Télécharger le projet
Commenter

Description

Voici un petit script qui permet de créer des barres de progression, via jQuery, très simplement pour les rajouter à vos pages web.
Le code d'intégration tient en une ligne mais il est personnalisable.

La barre peut être aligné verticalement ou horizontalement, on peut modifier les couleurs et la taille.

Une demo est visible ici : http://www.coopmcs.com/demo/progressbar/progressbar.html

La source présentée contient 6 progress bar de différentes couleurs et orientation.

Source / Exemple : 


<html>
<head>
<title> new document </title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="progressBar.jQuery.js"></script>
<style type="text/css">@import url(progressBar.jQuery.css);</style>
<script language="javascript">
<!--

var compteur = 60;

function update_progressBar(valeur) {
	/* params are	name:default
					orientation:'vertical',	// 'vertical' ou 'horizontal' -> orientation de la progress bar
					value:0					// valeur par défaut de la progress bar
					max:100					// valeur maximum possible
					rows:30					// nombre de lignes pour l'affichage


    	
  • /


	
	$('#progress1').progressBar( { value:valeur , rows:60} );
	$('#progress2').progressBar( { value:valeur/2 } );
	$('#progress3').progressBar( { value:valeur/3 } );
	$('#progress4').progressBar( { value:valeur   , orientation:'horizontal'} );
	$('#progress5').progressBar( { value:valeur/2 , orientation:'horizontal'} );
	$('#progress6').progressBar( { value:valeur/3 , orientation:'horizontal'} );

	if (compteur<=100) {
		window.setTimeout ("update_progressBar(" + compteur++ + ")", 120 ); // toute les second
	}
}

$(document).ready(function () {
	window.setTimeout ("update_progressBar(compteur)", 60 ); // toute les second
});

//-->
</script>

<style>
/* red progress bar*/
#progress2 td.progressBar-off	{ background-color:#600; }
#progress2 td.progressBar-on  	{ background-color:#f00; }
#progress2 td.progressBar-value { color:#f00; }

/* yellow progress bar */
#progress3 td.progressBar-off  	{ background-color:#660; }
#progress3 td.progressBar-on   	{ background-color:#ff0; }
#progress3 td.progressBar-value { color:#ff0; }

/* maroon progress bar */
#progress4 td.progressBar-off	{ background-color:maroon; }
#progress4 td.progressBar-on	{ background-color:peru; }
#progress4 td.progressBar-value { color:peru; }

/* blue progress bar */
#progress5 td.progressBar-off	{ background-color:MidnightBlue ; }
#progress5 td.progressBar-on	{ background-color:DeepSkyBlue ; }
#progress5 td.progressBar-value { color:DeepSkyBlue ; }

/* white progress bar */
#progress6 td.progressBar-off	{ background-color:DimGray ; }
#progress6 td.progressBar-on	{ background-color:white; }
#progress6 td.progressBar-value { color:white; }
</style>
</head>

<body style="background-color:black;color:red;">

<div id="progress1" style="position: relative; float: left;"></div>
<div id="progress2" style="position: relative; float: left;"></div>
<div id="progress3" style="position: relative; float: left;"></div>
<br style="clear:both;"/>
<br style="clear:both;"/>
<div id="progress4"></div>
<div id="progress5"></div>
<div id="progress6"></div>
</body>
</html>

Conclusion :


C'est mon premier plugin jQuery, j'ai fais ce test pour voir un peu comment ce comportait le bazard.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (ryosama)