Descripción
Para conseguir el efecto característico de las barras de progreso de forma limpia se necesitarían capas con efectos de filtrado (como el de transparencia) que manipulan los píxeles de color que están debajo de ella.
Podemos conseguir el efecto mediante CSS 2 con un pequeño truco que consiste en crear dos capas exactamente iguales pero con los colores diferentes de tal forma que una esté encima de la otra. Para crear el efecto, sólo tenemos que recortar la capa superior para dejar ver parte de lo que hay abajo.
Este efecto se ha conseguido utilizando la propiedad 'clip' que permite recortar divs. También se puede utilizar la combinación overflow:hidden y width pero el CSS queda algo más engorroso.
Para finalizar sería conveniente crear un javascript que se encargue de gestionar automáticamente la etiqueta, el porcentaje, los colores y los tamaños.
Ejemplo
Puedes descargar el archivo original desde /TreeWeb/Articulos/HTML-y-CSS/Barra-de-progreso/barra_de_progreso.html.Código
<!--
Maquetación para barras de progreso en HTML + CSS
Autor: gerardooscarjt@gmail.com
Fecha: 02/09/2010
-->
<style type="text/css">
/*************************************************/
/* CSS PARA TODAS LAS BARRAS DE PROGRESO */
/*************************************************/
.barra_progreso {
/* Formato estructural */
border:solid red 0px;
/* Estilo por defecto */
width:500px;
text-align:center;
}
.barra_arriba {
/* Formato estructural */
position:absolute;
height:inherit;
width:inherit;
/* Estilo por defecto */
background-color:navy;
color:white;
clip:rect(0px, 300px, auto, 0px);
}
.barra_abajo {
/* Formato estructural */
height:inherit;
/* Estilo por defecto */
background-color:lightblue;
color:navy;
}
/*************************************************/
/* CSS PARA LOS ESTILOS DE LA BARRA 1 */
/*************************************************/
#barra1 {
width:400px; /* Es obligatorio que sea en px */
height:auto;
margin:auto;
}
#barra1 .barra_arriba{
/* Sólo modificar la segunda coordenada (_, X, _, _) */
clip:rect(0px, 220px, auto, 0px);
background-color:green;
color:white;
}
#barra1 .barra_abajo {
color:black;
background-color:#EEEE33;
}
/*************************************************/
/* CSS PARA LOS ESTILOS DE LA BARRA 2 */
/*************************************************/
#barra2 {
width:300px; /* Es obligatorio que sea en px */
height:auto;
margin:auto;
border:solid black 1px;
border-top-color:silver;
border-left-color:silver;
}
#barra2 .barra_arriba{
/* Sólo modificar la segunda coordenada (_, X, _, _) */
clip:rect(0px, 150px, auto, 0px);
background-color:#FF6666;
color:white;
}
#barra2 .barra_abajo {
color:black;
background-color:white;
}
</style>
<div id="barra1" class="barra_progreso">
<div class="barra_arriba">
Mi barra de prueba (55%)
</div>
<div class="barra_abajo">
Mi barra de prueba (55%)
</div>
</div>
<br><br>
<div id="barra2" class="barra_progreso">
<div class="barra_arriba">
Barra 2
</div>
<div class="barra_abajo">
Barra 2
</div>
</div>
<br><br>
<div id="barra3" class="barra_progreso" style="margin:auto;">
<div class="barra_arriba">
Barra sin estilos
</div>
<div class="barra_abajo">
Barra sin estilos
</div>
</div>