Barra de progreso con JavaScript

Para crear una barra de progreso mediante JavaScript, como la que aparece en la imagen, simplemente hay que hacer referencia en el head de la página Web al archivo de script xp_progress.js como se muestra a continuación:

<script language="javascript" src="xp_progress.js">

/***********************************************
* WinXP Progress Bar- By Brian Gosselin- http://www.scriptasylum.com/
* Script featured on Dynamic Drive- http://www.dynamicdrive.com
* Please keep this notice intact
***********************************************/

</script>

E incluir este otro script en el lugar de la página Web donde se desee ubicar la barra de progreso:

<script type="text/javascript">
var bar=createBar(150,15,"white",1,"black","#333366",85,7,3,"");
</script>

La definición de la función y sus parámetros es la siguiente:

var bar = createBar(width, height, backgroundColor, borderWidth, borderColor, blockColor, scrollSpeed, blockCount, actionCount, actionString)

Donde:

• bar - Variable que contendrá una referencia a la barra creada.
• width - Ancho de la barra, en pixels.
• height - Altura de la barra, en pixels.
• backgroundColor - Color de fondo de la barra.
• borderWidth - Ancho del borde de la barra, en pixels.
• borderColor - Color del borde de la barra.
• blockColor - El color más oscuro de los bloques que forman la barra. Este color se irá degradando hasta hacerse transparente.
• scrollSpeed - Tiempo, en milisegundos, entre cada movimiento de un bloque de la barra.
• blockCount - Número de bloques de la barra.
• actionCount - Número de veces que los bloques recorren la barra entera antes de que se ejecute actionString.
• actionString - Función de JavaScript que se ejecuta una vez los bloques han recorrido la barra entera actionCount veces. Si este campo aparece vacío no se ejecutará nada.

El objeto barra de progreso dispone de tres métodos toggleBar, hideBar y showBar, que sirven para pausar, ocultar y mostrar la barra, respectivamente:

<a href="javascript:bar.togglePause()">Pausa</a>
<a href="javascript:bar.hideBar()">Ocultar</a>
<a href="javascript:bar.showBar()">Mostrar</a>

Se puede ver un ejemplo de la barra de progreso en funcionamiento aquí.

Fuente: WinXP Progress Bar de Dynamic Drive.