Barras de Progreso animadas con CSS
La idea es conseguir solo con CSS el estilo de barras de progreso en movimiento para poder luego integrar en nuestro site, la forma de hacerlo es muy fácil y el resultado queda de esta forma:
80%
Para la animación usaremos un gif animado y luego mostraremos lo que nos interese a traves de un span que irá desde cero hasta 200 px que es el ancho total de la barra. El código CSS es el siguiente:
.progressBar{
width:216px;
height:41px;
background:url(bg_bar.gif) no-repeat 0 0;
position:relative;
}
.progressBar span{
position:absolute;
display:block;
width:200px;
height:25px;
background:url(bar.gif) no-repeat 0 0;
top:8px;
left:8px;
overflow:hidden;
text-indent:-8000px;
}
.progressBar em{
position:absolute;
display:block;
width:200px;
height:25px;
background:url(bg_cover.gif) repeat-x 0 0;
top:0;
}
El html no es más que un párrafo con la información que mostrará la barra de progreso
Personas que piensan que el Madrid ganará la liga
80%
Vía | CSS Globe
