Barras de progreso animadas con CSS

Aquí hay una simple demostración de cómo se puede crear animaciones barra de progreso utilizando puro css. El truco es muy simple. Tenemos 3 elementos, un contenedor y 2 elementos anidados.

El Concepto

Vamos a poner una imagen de fondo y definir un ancho fijo y altura fija.El primer elemento (SPAN) actuará como una barra de progreso. Al segundo elemento le daremos una posicion fija (EM) por encima de la barra de progreso y la colocaremos hacia la izquierda a un valor deseado. El elemento EM tiene el mismo fondo que el contenedor por lo que le da un efecto de la barra de progreso se detuvo en cierto porcentaje.

Ahora el codigo para usarlo seria algo asi:

Esto ara un efecto de que la barra de porcentaje llego a un 50%. La verdad es muy sencillo.

Aqui les dejo la fuente de esta información: Pagina web

Y aqui el codigo de ejemplo que da la pagina:descargar y el Demo