Ejemplos haciendo generando de barras con JavaScript y CSS

01.ejemplo_basico_css.html

<div class="marco_barra">
    <div class="barra_avance" style="width: 50%;">50%</div>
</div>

02.codigo_barras_base.css

div.marco_barra, .ui-progressbar {
	background: #282828;
	border: 5px solid #BFBFBF;
	width: 100%;
	height: 30px;
	padding: 0;
	/* trataremos de poner las esquinas redondeadas */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	/* trataremos de poner sombras tanto internamente como externamente del marco de la barra de proceso */
	-webkit-box-shadow:inset 2px 2px 5px #212121,inset -2px -2px 5px #000000,5px 5px 5px #CDDDE6;
	-moz-box-shadow:inset 2px 2px 5px #212121,inset -2px -2px 5px #000000,5px 5px 5px #CDDDE6;
	-ms-box-shadow:inset 2px 2px 5px #212121,inset -2px -2px 5px #000000,5px 5px 5px #CDDDE6;
	-o-box-shadow: inset 2px 2px 5px #212121,inset -2px -2px 5px #000000,5px 5px 5px #CDDDE6;
	box-shadow:inset 2px 2px 5px #212121,inset -2px -2px 5px #000000,5px 5px 5px #CDDDE6;
}
div.marco_barra div.barra_avance,
.ui-progressbar .ui-progressbar-value{
	height: 28px;
	/* agregamos el borde para que de un efecto de sobre-marco */
	border:1px solid #365077;
	border-top:1px solid #4BA3DE;
	border-left:1px solid #4BA3DE;
	/* trataremos de poner un fondo con un gradiente si no se puede lo pondra con un color solido */
	background: #00A5D4;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #00A5D4, #006C8B);
	background-image: -ms-linear-gradient(top, #FF5000, #003364);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FF5000), to(#003364));
	background-image: -webkit-linear-gradient(top, #FF5000, #003364);
	background-image: -o-linear-gradient(top, #FF5000, #003364);
	background-image: linear-gradient(top, #FF5000, #003364);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF5000', endColorstr='#003364',GradientType=0 );
	/* trataremos de poner las esquinas redondeadas */
	-moz-border-radius:0 5px 5px 0;
	-webkit-border-radius:0 5px 5px 0;
	-o-border-radius:0 5px 5px 0;
	border-radius:0 5px 5px 0;
	/* Cuestiones relacionadas con la tipografia */
	color: #000;
	font-weight: bold;
	font-size: 20px;
	text-shadow: 1px 1px 1px #66CFED,-1px -1px 2px #23A1C5;
	text-align: right;
}

03.ejemplo2_barra_mini.html

<div class="marco_barra mini" style="width: 200px;">
    <div class="barra_avance mini" style="width: 50%;">50%</div>
</div>

04.codigo_barras_mini.css

/* definicion para las barras minis */
div.mini{
    border: 2px solid #BFBFBF;
    height: 20px;
}

div.mini div.mini{
    height: 18px;
    font-weight: bold;
    font-size: 1px;
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    -o-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;
}

05.barras_animadas.css

/* definición para las barras animadas */
div.animada{ }

div.animada div.animada{
	/* Ahora agregamos una imagen la cual se repite en el eje X*/
	background: url(barra_animada.gif) repeat-x;
	/* agregamos el borde para que de un efecto de sobre-marco */
	border:1px solid #774D36;
	border-top:1px solid #DE7B4B;
	border-left:1px solid #DE7B4B;
	/* Cuestiones relacionadas con la tipografia */
	text-shadow: 1px 1px 1px #ED9E66,-1px -1px 2px #C55123;
}

06.ejemplo_barra_animada.html

<div class="marco_barra animada">
    <div class="barra_avance animada" style="width: 50%;">50%</div>
</div>

07.ejemplo_barra_animada_js.html

<div class="marco_barra animada">
    <div id="barra_animada_js" class="barra_avance animada" style="width: 50%;">50%</div>
</div>

08.codigo_animacion_barras.js

/*Anima una barra */
function animarBarra(id, incremento, intervalo){
	e = document.getElementById(id);
	var val = parseInt(e.innerHTML) + parseInt(incremento);
	if(val>100){
		val=(incremento>0)? 0 : 100;
	}else{
		if(val<0){
			val=(incremento<0)? 100 : 0;
	}}
	e.innerHTML = val+'%';
	e.style.width = val+'%';
	setTimeout("animarBarra('"+id+"', "+incremento+", "+intervalo+")", intervalo);
}

09.ejemplo_llamada_animacion.html

<script language="Javascript"  type="text/javascript">
    window.onload = function (){
        animarBarra('barra_animada_js',10,200);
    }
</script>