Hace unos días me encontraba en el trabajo y decidí hacer unas barras animadas en css, de esas que se cargan de forma automática y que se ven en muchos sitios de la web. De modo que ni corto ni perezoso me puse a codificar e hice algo bastante sencillo como podéis ver este enlace.

No quise ponerle muchas florituras, ya me vais conociendo y sabéis que me gusta ir directo al tema, si queréis darle más estilo sois libres de adaptar el script a vuestras necesidades.

Empezaremos creando el html que nos hace falta para que el CSS haga su magia:

<div class="barra"><div id="javascript"><div class="texto">JS</div></div></div><br/>
<div class="barra"><div id="php"><div class="texto">PHP</div></div></div>

Vemos que hemos introducido dos barras, una en cada línea, y que cada barra se compone de tres divs:

• El primer div con la clase barra, nos marcará la barra completa, la zona naranja en el resultado
• El segundo div con la id del campo específico, nos marcará el porcentaje de la barra total que queremos colorear
• El tercer div con clase texto, imprimirá el texto que queremos que aparezca en cada barra.

Tan solo con esto podemos crear la estructura de nuestras barras, pero de momento no hacen nada, de modo que ahora tenemos que hacer que el CSS cree la magia:

.barra{
	width: 100px;
	height: 30px;
	border-radius: 5px;
	background-color: orange;
	color: white;
	text-align: center;
	font-weight: bold;

}
#javascript{
	width: 40%;
	height: 30px;
	background-color: blue;
	border-radius: 5px 0 0 5px;
}
#php{
	width: 88%;
	height: 30px;
	background-color: #fff303;
	border-radius: 5px 0 0 5px;
}
.texto{
	padding-top: 3px;
}

.barra > div{
   -webkit-animation: progress-barra 2s;
   -moz-animation: progress-barra 2s;
}

@-webkit-keyframes progress-barra {
  0% { width: 0; }
} 

@-moz-keyframes progress-barra {
   0% { width: 0; }
}

Aquí vemos como primero creamos los estilos de la barra contenedora utilizando CSS muy básico y como luego creamos los estilos de cada barra interior también utilizando CSS sencillo que por no alargar demasiado la entrada daremos por conocido y donde la única complejidad puede encontrarse en ver como el porcentaje del width hace referencia a la caja superior que lo contiene, el texto tan solo tiene un margin-top.

Pero en la línea 27 marcamos la animación, con una duración de dos segundos para el div que esté debajo de la clase barra, es decir nuestros campos específicos, en el ejemplo php y javascript.

En las líneas 32 y 36 es donde tiene lugar la animación por medio de keyframes, y donde marcamos 0% {width:0} es desde donde comienza la animación, en nuestro caso desde el inicio.

Cómo podéis ver es muy sencillo crear barras animadas en CSS y puede resultar muy útil a la hora de realizar algunas estructuras webs, siendo solo la punta del iceberg para los efectos dinámicos en nuestros proyectos web.