Si estas buscando una barra de progreso sencilla, simple y que se pueda implementar en unos pocos minutos progre(c)ss es una buena alternativa.
progre(c)ss es una barra de progreso estilo Youtube creada utilizando solamente CSS. No necesita ni JavaScript ni ninguna otra tecnología para funcionar.
La barra de progreso que creamos tiene una estructura básica, apenas necesita una DIV, una clase y una etiqueta data para funcionar. La estructura necesaria es la siguiente:
<div class="progrecss" data-progrecss="77"> your content! </div>
Como se darán cuenta emplear este recurso no tiene ninguna ciencia. La etiqueta data-progrecss es la que define el valor que va a tomar la barra de progreso. Este proyecto no tiene absolutamente ninguna dependencia, probablemente esta sea su principal característica.
Esta iniciativa solo necesita CSS para funcionar, sin embargo y llegado el caso, podemos combinarla perfectamente con JavaScript, principalmente si lo que buscamos es cambiar dinámicamente el valor que indica el progreso, por ejemplo si la vinculamos a un upload de archivos podemos mostrar el estado de la carga.
El atributo data-progrecss es el que muestra el valor actual de la barra de progreso, esta valor puede ir del 1 al 100, y este es justamente el que debemos cambiar de forma dinámica si lo que queremos es actualizar el valor en tiempo real.
El soporte para navegadores es muy bueno, funciona con todos los navegadores modernos, el soporte es completo en todos, si hablamos específicamente del Internet Explorer (que es el que suele dar más problemas) la compatibilidad comienza desde la versión 10 en adelante.
Esta barra de progreso CSS puede ser vinculada mediante AJAX a cualquier lenguaje del lado del servidor, en la documentación oficial pueden encontrar varios ejemplo para aprender a hacerlo.
Esta fantástica barra de progreso es un proyecto liberado bajo licencia MIT.
Web: progre(c)ss
