Prima di tutto bisogna includere la libreria che contiene lo script, che risulta così semplice ed efficace che scrivo il codice di seguito, eventualmente lo potete scaricare da qui.

Contenuto del file jqueryprogressbar.js:

/*
* Copyright (c) 2007 Josh Bush (digitalbush.com)
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:

* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/

/*
* Progress Bar Plugin for jQuery
* Version: Alpha 2
* Release: 2007-02-26
*/
(function($) {   
//Main Method
$.fn.reportprogress = function(val,maxVal) {           
var max=100;
if(maxVal)
max=maxVal;
return this.each(
function(){       
var div=$(this);
var innerdiv=div.find(".progress");

if(innerdiv.length!=1){                       
innerdiv=$("<div class='progress'></div>");                   
div.append("<div class='text'>&nbsp;</div>");
$("<span class='text'>&nbsp;</span>").css("width",div.width()).appendTo(innerdiv);                   
div.append(innerdiv);                   
}
var width=Math.round(val/max*100);
innerdiv.css("width",width+"%");   
div.find(".text").html(width+" %");
}
);
};
})(jQuery);

in pratica viene definito il metodo reportprogress che accetta in ingresso fino a due valori: il primo è il valore da renderizzare mentre il secondo il valore massimo raggiungibile. Di default è possibile specificare anche solo un parametro, ossia il valore da visualizzare, perché come fondo scala viene assunto 100.

Ora è necessario definire lo stile della progress bar, quello che segue è un esempio ma è possibile modificarlo a piacimento e inserirne di propri utilizzando dei gradienti diversi o immagini per effetti 3D.

/* progress bar container */
#progressbar{
border:1px solid black;
width:200px;
height:20px;
position:relative;
color:black;
}
/* color bar */
#progressbar div.progress{
position:absolute;
width:0;
height:100%;
overflow:hidden;
background-color:#369;
}
/* text on bar */
#progressbar div.progress .text{
position:absolute;
text-align:center;
color:white;
}
/* text off bar */
#progressbar div.text{
position:absolute;
width:100%;
height:100%;
text-align:center;
}

Da notare che ogni sotto componente è facilmente personalizzabile ed adattabile immediatamente agli stili e colori già presenti sui propri siti.
Una volta definito lo stile e incluso la libreria della barra di avanzamento non resta che scrivere il codice per impostare un valore, ossia:

$("#progressbar").reportprogress(0);

dove 0 rappresenta proprio il valore, naturalmente la prima volta è necessario inizializzare la progressbar proprio con il valore iniziale che gli vogliamo dare (può essere anche un numero diverso da 0) e modificarlo o aggiornarlo a seconda delle necessità, per esempio durante il download e l'upload di files, la visualizzazione dei risultati di un pool (sondaggio) ecc..

Per eseguire delle prove riporto l'esempio di digitalbrush che mi sembra molto esauriente, di seguito il codice javascript di prova:

var pct=0;
var handle=0;
function update(){
$("#progressbar").reportprogress(++pct);
if(pct==100){
clearInterval(handle);
$("#run").val("start");
pct=0;
}
}
jQuery(function($){
$("#run").click(
function(){
if(this.value=="start"){
handle=setInterval("update()",100);
this.value="stop";
}else{
clearInterval(handle);
this.value="start";
}
}
);
$("#reset").click(function(){
pct=0;
$("#progressbar").reportprogress(0);
});
});

e di seguito il codice html:

<h2>Demo</h2> 
<div id="progressbar"></div> 
<input type='button' id='run' value='start'/> 
<input type='button' id='reset' value='reset'/> 

Come sempre l'esempio è un buon modo per partire e implementare una soluzione ad hoc. Il codice di esempio è disponibile alla pagina demo.

Collegamenti esterni: jQuery | progressBar