Barra de Progreso CSS para Markdown

Para nuestro programa semanal WeAreDevelopers Live Show quería incluir una barra de progreso temporal en la página que mostramos. El reto era que esas páginas son archivos markdown servidos con GitHub Pages y, aunque ya uso algo de scripting, buscaba una solución en CSS puro para que funcionara en GitHub sin tener que crear una plantilla HTML específica. Aquí tienes el resultado.

Puedes ver el efecto en acción en la página de demostración con su código fuente líquido, o probar las pocas líneas de CSS en este CodePen. Si quieres reutilizarlo, forkea el repositorio o copia la carpeta _includes.

Uso de la barra de progreso basada en tiempo en CSS

Puedes añadir tantas barras como necesites en una misma página. Para incluir una barra en un documento markdown con Liquid, utiliza una directiva como esta: {% include cssbar.html duration=2s id=guesttopic styleblock=yes %}

duration define cuánto debe tardar el progreso en completarse.

id es obligatorio y debe ser único para que la funcionalidad funcione correctamente.

Si estableces styleblock en yes, el include añadirá un bloque style con las reglas CSS necesarias, de modo que no tengas que tocarlas en los estilos globales. Solo necesitas activarlo en uno de los includes.

Uso de la barra en documentos HTML

También puedes usarla en documentos HTML puros, como se ve en el CodePen. Un ejemplo mínimo sería: <div class=progressbar style=--duration:2s;> <input type=checkbox id=progreso> <label for=progreso>iniciar</label> </div>

No olvides configurar un id único tanto en el checkbox como en el label, y definir la duración en el atributo style en línea.

Limitaciones

Se trata de un pequeño hack: no es accesible para usuarios no visuales y aprovecha un checkbox para mantenerlo solo con CSS. Aun así, es accesible por teclado.

En un mundo ideal, usaríamos el elemento HTML progress y lo estilizaríamos directamente.