Barras de progreso con CSS

Las barras de progreso son un indicado claro que informa al usuario que debe esperar a que un proceso finalice.

Cuando un proceso tarda en dar un resultado es muy importante informar al usuario de ello y no dejar una página en blanco cargando que no dice nada y puede acabar desesperando al usuario en la espera.

En estos casos, es muy probable que decida cerrar la ventana si no ve nada.

Una buena idea para evitar esto es mostrar algo que indique que la página se está cargando, las barras de progreso pueden ser ideales para estas situaciones.

Las barras de progreso son elementos gráficos que están presentes en casi todas las aplicaciones que realizan operaciones largas tales como cargar grandes archivos, procesamiento de imágenes o procesamiento de vídeos.

Estas barras se utilizan para indicar al usuario que el ordenador está pensando o está ocupado haciendo alguna tarea. Lo mismo puede ocurrir en la carga de páginas Webs, aplicaciones o cualquier funcionalidad que requiera un proceso.

Con la lectura de este artículo vas a descubrir una forma muy simple y clara de mostrar las barras de progreso usando simplemente las reglas de estilos CSS.

Estructura HTML

La estructura HTML es muy simple. Lo puedes ver a continuación:

<div class="progress">
    <div class="progress-bar" style="width:75%;">
        <span class="progress-bar-text">75%</span>
    </div>
</div>

Tan solo defino 2 contenedores anidados.

El contenedor con clase=»progress» es como el contenedor padre que cotiene todo el elemento.

El contenedor interior con clase=»progress-bar» es el elemento que indica el porcentaje de progreso.

En este contenedor establezco el atributo style con un acho para del 75% para que justamente me ocupe ese espacio del contenedor padre.

Te preguntarás ¿porqué pones un atributo style en el elemento y no usa la hoja de estilos CSS para establecer el ancho?

Tiene su lógica. Cuando quieras darle movimiento dinámico con JavaScript, por ejemplo, resulta más fácil actualizar ese atributo. Te darás cuenta cuando publique próximamente un tutorial de como aplicarle movimiento a la barra de progreso.

Y, finalmente, defino un span con clase=»progress-bar-text» que uso para informar al usuario del porcentaje actual de carga.

Reglas de estilo CSS

Las reglas de estilo también he intentado simplificarlas al máximo y le he dado mi propio estilo. Lo que me gustaría decirte es que es muy fácil customizarlo a tu gusto.

.progress {
    height: 35px;
    width: 100%;
    border: 1px solid #428bca;
    border-radius: 5px;
    background-color: #e6f3fa;
    margin-bottom: 15px;
}
 
.progress-bar {
    height: 100%;
    background: #428bca;
    display: flex;
    align-items: center;
    transition: width 0.25s;
    border-radius: 5px;
}
 
.progress-bar-text {
    margin-left: 10px;
    font-weight: bold;
    color: #cce7f5;
}

Resultado

Barra de progreso al 75%

Conclusiones

En este artículo te he presentado como crear un aspecto agradable, sencillo y personalizable de una barra de progreso que puedes utilizar en tus proyectos.

Existen otras herramientas para hacerle esperar al usuario de que un proceso se está completando y que debe espera, como por ejemplo, una cuenta atrás, una rueda girando o los puntos suspensivos, entre otros.

Para mi gusto las barras de progreso son las que mejor representan el efecto de cargando.

Si tu proyecto va a hacer esperar al usuario para completar una tarea o proceso, no dudes en utilizar las barras de progreso para indicarle que debe esperar a que finalice el proceso para obtener su solicitud.

De esta forma, tu página web o proyecto será más usable y pensado para el usuario final.

Si te interesa este tipo de contenido, te recomiendo que estés al tanto, ya que, próximamente tengo pensado publicar como mover esta barra de progreso de forma dinámica con JavaScript. No te lo puedes perder.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(1 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre