¡Hola!, para ayudarnos en el tema de los retos del 2016 que escribí ayer en el blog, les traigo un tutorial de como hacer la barra de progreso, esa que ponemos debajo de las imagenes de nuestros retos. Hace como dos años les publiqué un creador de estas barras, pero lamentablemente dejó de funcionar, por ello les enseñaré como hacerlo manualmente, con un poco de código HTML y por supuesto, nuestro muy hermoso CSS.

Claro que jugando con el diseño podemos obtener una gran variedad de barras, a continuación les ofrezco algunas junto con su código para que solo copien y peguen en su blog, más abajo les daré una explicación sobre el código.

Diseños cuadrados

---

Por cuadrado me refiero a las esquinas, pues habrá personas a las que no les guste tanto lo redondeado y estoy de acuerdo, pues el exceso puede quitarle un poco de formalidad o minimalismo al blog. Quizás es por eso que muchos blogger optan por el siguiente:

a) Centrado, el progreso se expande a los lados.

60/100 páginas (60% leído)

Código HTML <center><div style="width:200px; height:13px; background:#FFFFFF; border:1px solid #666;"><div style="width:60%; height:13px; background:#abdcf0;"></div></div>60/100 páginas (60% leído)</center>

---

b) Normal, el progreso se expande a la derecha.
60/100 páginas (60% leído)

Código HTML <div style="width:200px;height:13px;background:#FFFFFF;border:1px solid #666;margin:auto;"><div style="width:60%;height:13px;background:#fad4b8;"></div></div> <center>60/100 páginas (60% leído)</center>

---

c) Utilizando padding (relleno).
60/100 páginas (60% leído)

Código HTML <div style='width:200px;height:11px;padding:2px 0px;background:#fff;margin:0px auto;border:1px solid #666;'><div style='width:60%;height:11px;background:#a0c6e1;font-size:3px;line-height:3px;'> </div></div> <center>60/100 páginas (60% leído)</center>

Diseños redondeados

---

Pero, habrá personas a las que sí les guste lo redondeado, pues si se usa de manera sutil puede resultar llamativo en el diseño del blog:

d) Centrado, el progreso se expande a los lados.

60/100 páginas (60% leído)

Código HTML <center><div style='width:200px;height:13px;padding:0px;background:#fff;margin:0px auto;border:1px solid #666;border-radius:4px;'><div style='width:60%;height:13px;background:#abdcf0;font-size:3px;line-height:3px;border-radius:4px;'> </div></div></center> <center>60/100 páginas (60% leído)</center>

---

e) Normal, el progreso se expande a la derecha.
60/100 páginas (60% leído)

Código HTML <div style='width:200px;height:13px;padding:0px;background:#fff;margin:0px auto;border:1px solid #666;border-radius:4px;'><div style='width:60%;height:13px;background:#eef6bc;font-size:3px;line-height:3px;border-radius:4px;'> </div></div>

---

f) Utilizando padding (relleno).
60/100 páginas (60% leído)

Código HTML <div style='width:200px;height:11px;padding:2px 0px;background:#fff;margin:0px auto;border:1px solid #666;border-radius:4px;'><div style='width:60%;height:11px;background:#a0c6e1;font-size:3px;line-height:3px;'> </div></div> <center>60/100 páginas (60% leído)</center>

---

Pues los anteriores son solamente ejemplos, uno puede personalizar su barra de la manera en que guste por ejemplo la mía es la que pueden ver a continuación, en ella le agrego un color de fondo, y la hago más delgada. U otras con el texto en el centro.

g) Como la uso en el blog.
60/100 páginas (60% leído)

Código HTML <div style='width:200px;height:4px;padding:2px;background:#f9f9f9;margin: auto;border:1px solid #ccc;border-radius:4px;'><div style='width:60%;height:4px;background:#FB686D;font-size:3px;line-height:3px;'></div></div> <center>60/100 páginas (60% leído)</center>

---

h) Con texto en el centro.
60/100 páginas (60% leído)

Código HTML <div style='width:200px;height:13px;padding:0px;background:#fff;margin:0px auto;border:1px solid #666;border-radius:4px;'><div style='width:60%;height:13px;background:#eef6bc;font-size:9px;line-height:13px;border-radius:4px;text-align:center; color:#8e9f25;'><b>60%</b></div></div> <center>60/100 páginas (60% leído)</center>

Una breve explicación del código HTML

---

Bien, empecemos con el código HTML. Esto se compone de un bloque <div> dentro de otro bloque <div>, como lo siguiente:

<div style="width:200px; height:13px; background:#FFFFFF; border:1px solid #666; margin:auto;"> <div style="width:60%; height:13px; background:#fad4b8;"> </div> </div> <center>60/100 páginas (60% leído)<br /><br /></center>

En el código tenemos principalmente:

1) width: 200px; y height:13px;
Es el tamaño de ancho y alto respectivamente, en ambos <div> debe tener la misma altura. El ancho en el primer <div> será el tamaño total de la barra, mientras que en el segundo <div> tendremos el porcentaje que hemos alcanzado y es el que actualizaremos constantemente.

2) background:#FFFFFF;
Es el color de fondo, en el primer <div>, será el color del fondo del rectangulo, por ello les recomiendo dejarlo en blanco (#ffffff), sin fondo (background:none;) o transparente (background-color:transparent;).

» Si no conoces los colores en HTML, te dejo este enlace para que encuentres muchos. «
3) border:1px solid #666;
Es el atributo del borde y de preferencia debería tenerlo solo el primer <div>. Primero tiene el tamaño del borde en píxeles, después el estilo de borde [existen también: dotted (punteado), solid (normal), double (doble) y dashed (líneas discontinuas)], y por último el color del borde.

4) margin:auto;
Esto significa que el margen se asignará de manera automática y quedará centrada la barra, para usar el efecto de que se expanda hacia los lados no debe llevar este atributo, pues lo asinamos con la etiqueta <center>.

5) padding:2px;
Esto dará un relleno, aunque más bien es como un margen interno que deja el <div>, se le cambia el tamaño en píxeles.

6) border-radius:4px;
Es el radio de la curva que le dará a cada esquina, en caso de que lo tenga.

---

Pues espero que les sea de ayuda, cualquier duda puedes preguntar en los comentarios y con gusto te ayudaré, además preguntas sobre cualquier tema de diseño de su blog saben que con gusto responderé. Saludos.