Progress

Estructura básica de barras de progreso

Las barras de progreso son componentes visuales fundamentales para comunicar el avance o estado de completitud de una tarea o proceso. Bootstrap proporciona un sistema elegante y accesible que permite crear indicadores de progreso claros y comprensibles para los usuarios.

Componentes fundamentales

La estructura básica de una barra de progreso en Bootstrap requiere dos elementos principales que trabajan en conjunto:

<div class="progress">
  <div class="progress-bar" style="width: 50%"></div>
</div>

El contenedor padre utiliza la clase .progress y actúa como el fondo y marco de referencia de la barra. Este elemento define el área total disponible y proporciona el contexto visual necesario. El elemento interno con clase .progress-bar representa la porción completada y se posiciona dentro del contenedor.

Configuración del valor de progreso

El progreso se define mediante el atributo style aplicado al elemento .progress-bar. La propiedad width acepta cualquier valor CSS válido, pero típicamente se utiliza en porcentajes:

<!-- 25% de progreso -->
<div class="progress">
  <div class="progress-bar" style="width: 25%"></div>
</div>

<!-- 75% de progreso -->
<div class="progress">
  <div class="progress-bar" style="width: 75%"></div>
</div>

Esta aproximación ofrece flexibilidad total para establecer valores precisos de progreso, desde 0% (sin progreso visible) hasta 100% (completitud total).

Atributos de accesibilidad

Para garantizar que las barras de progreso sean accesibles para todos los usuarios, Bootstrap recomienda incluir atributos ARIA que proporcionen información semántica:

<div class="progress">
  <div class="progress-bar" 
       style="width: 60%" 
       role="progressbar" 
       aria-valuenow="60" 
       aria-valuemin="0" 
       aria-valuemax="100">
  </div>
</div>

El atributo role="progressbar" identifica el elemento como un indicador de progreso. Los valores aria-valuenow, aria-valuemin y aria-valuemax comunican el estado actual, mínimo y máximo respectivamente a las tecnologías de asistencia.

Ejemplos prácticos básicos

Progreso de completitud de perfil:

<div class="progress">
  <div class="progress-bar" 
       style="width: 40%" 
       role="progressbar" 
       aria-valuenow="40" 
       aria-valuemin="0" 
       aria-valuemax="100">
  </div>
</div>
<p class="mt-2">Completa tu perfil: 2 de 5 secciones</p>

Indicador de nivel de habilidad:

<div class="progress mb-3">
  <div class="progress-bar" 
       style="width: 85%" 
       role="progressbar" 
       aria-valuenow="85" 
       aria-valuemin="0" 
       aria-valuemax="100">
  </div>
</div>
<small class="text-muted">Nivel avanzado</small>

Altura personalizada

La altura de las barras de progreso se puede ajustar fácilmente aplicando la propiedad CSS height al contenedor .progress:

<!-- Barra más delgada -->
<div class="progress" style="height: 8px;">
  <div class="progress-bar" style="width: 70%"></div>
</div>

<!-- Barra más gruesa -->
<div class="progress" style="height: 25px;">
  <div class="progress-bar" style="width: 30%"></div>
</div>

Esta personalización permite adaptar las barras al diseño específico de cada sección, manteniendo la proporción visual adecuada con el contenido circundante.

Colores, etiquetas y valores

Las barras de progreso en Bootstrap aprovechan el sistema de colores semántico del framework para comunicar diferentes estados y tipos de progreso. Esta integración visual permite transmitir información adicional de manera intuitiva y consistente.

Aplicación de colores semánticos

Bootstrap proporciona clases de color específicas que se aplican directamente al elemento .progress-bar para indicar diferentes contextos o estados:

<!-- Progreso estándar (azul) -->
<div class="progress">
  <div class="progress-bar bg-primary" style="width: 45%"></div>
</div>

<!-- Progreso exitoso (verde) -->
<div class="progress">
  <div class="progress-bar bg-success" style="width: 80%"></div>
</div>

<!-- Progreso de advertencia (amarillo) -->
<div class="progress">
  <div class="progress-bar bg-warning" style="width: 60%"></div>
</div>

<!-- Progreso crítico (rojo) -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width: 25%"></div>
</div>

Cada color transmite un significado semántico específico: bg-primary para progreso general, bg-success para completitud exitosa, bg-warning para situaciones que requieren atención, y bg-danger para estados críticos o errores.

Colores adicionales disponibles

El sistema también incluye colores complementarios que amplían las opciones visuales:

<!-- Progreso informativo (cyan claro) -->
<div class="progress">
  <div class="progress-bar bg-info" style="width: 55%"></div>
</div>

<!-- Progreso secundario (gris) -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width: 35%"></div>
</div>

<!-- Progreso claro -->
<div class="progress">
  <div class="progress-bar bg-light text-dark" style="width: 50%"></div>
</div>

<!-- Progreso oscuro -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width: 70%"></div>
</div>

Etiquetas de texto dentro de barras

Las barras de progreso pueden incluir texto descriptivo directamente dentro del elemento .progress-bar para mostrar información adicional:

<div class="progress">
  <div class="progress-bar bg-success" 
       style="width: 75%" 
       role="progressbar" 
       aria-valuenow="75" 
       aria-valuemin="0" 
       aria-valuemax="100">
    75% Completado
  </div>
</div>

El texto se centra automáticamente y utiliza un color que contrasta apropiadamente con el fondo de la barra para garantizar la legibilidad.

Diferentes tipos de información en etiquetas

Las etiquetas pueden mostrar diversos tipos de información según el contexto:

Porcentajes numéricos:

<div class="progress">
  <div class="progress-bar bg-info" style="width: 40%">
    40%
  </div>
</div>

Descripciones textuales:

<div class="progress">
  <div class="progress-bar bg-primary" style="width: 65%">
    Procesando archivos
  </div>
</div>

Combinación de valores y texto:

<div class="progress">
  <div class="progress-bar bg-warning" style="width: 30%">
    3 de 10 tareas
  </div>
</div>

Casos prácticos con colores y etiquetas

Indicador de completitud de perfil con estados:

<!-- Perfil básico -->
<div class="progress mb-2">
  <div class="progress-bar bg-warning" style="width: 35%">
    Básico - 35%
  </div>
</div>

<!-- Perfil completo -->
<div class="progress mb-2">
  <div class="progress-bar bg-success" style="width: 100%">
    Perfil completo
  </div>
</div>

Sistema de niveles de habilidades:

<!-- Principiante -->
<div class="progress mb-2">
  <div class="progress-bar bg-info" style="width: 25%">
    Principiante
  </div>
</div>

<!-- Intermedio -->
<div class="progress mb-2">
  <div class="progress-bar bg-primary" style="width: 60%">
    Intermedio - 60%
  </div>
</div>

<!-- Avanzado -->
<div class="progress mb-2">
  <div class="progress-bar bg-success" style="width: 90%">
    Avanzado - 90%
  </div>
</div>

Progreso de carga de archivos con estados

Este ejemplo muestra cómo los colores pueden indicar diferentes fases de un proceso:

<!-- Carga iniciada -->
<div class="progress mb-2">
  <div class="progress-bar bg-secondary" style="width: 15%">
    Iniciando...
  </div>
</div>

<!-- Carga en progreso -->
<div class="progress mb-2">
  <div class="progress-bar bg-primary" style="width: 65%">
    Cargando 65%
  </div>
</div>

<!-- Carga completada -->
<div class="progress mb-2">
  <div class="progress-bar bg-success" style="width: 100%">
    ✓ Archivo cargado
  </div>
</div>

<!-- Error en la carga -->
<div class="progress mb-2">
  <div class="progress-bar bg-danger" style="width: 45%">
    Error al cargar
  </div>
</div>

Consideraciones de legibilidad

Para las barras con colores claros como bg-light o bg-warning, es importante ajustar el color del texto para mantener un contraste adecuado:

<div class="progress">
  <div class="progress-bar bg-light text-dark" style="width: 55%">
    55% procesado
  </div>
</div>

<div class="progress">
  <div class="progress-bar bg-warning text-dark" style="width: 45%">
    Atención requerida
  </div>
</div>

Esta combinación de colores semánticos y etiquetas descriptivas crea un sistema de comunicación visual rico e informativo que mejora significativamente la experiencia del usuario al proporcionar contexto claro sobre el estado y progreso de las tareas.

Barras múltiples y striped

Las barras de progreso múltiples permiten visualizar diferentes componentes o categorías dentro de un mismo proceso, mientras que el efecto striped añade un patrón rayado que mejora la percepción visual y puede indicar procesos activos.

Barras de progreso múltiples

Las barras múltiples se crean incluyendo varios elementos .progress-bar dentro del mismo contenedor .progress. Cada barra representa una parte específica del total y se posiciona consecutivamente:

<div class="progress">
  <div class="progress-bar bg-success" style="width: 25%"></div>
  <div class="progress-bar bg-info" style="width: 20%"></div>
  <div class="progress-bar bg-warning" style="width: 15%"></div>
</div>

En este ejemplo, cada barra ocupa un porcentaje específico del ancho total, y la suma visual representa el progreso combinado de múltiples elementos.

Distribución de espacio en barras múltiples

Cada barra dentro del contenedor se posiciona automáticamente después de la anterior, creando una distribución continua:

<div class="progress">
  <div class="progress-bar bg-primary" style="width: 30%">
    Frontend 30%
  </div>
  <div class="progress-bar bg-success" style="width: 25%">
    Backend 25%
  </div>
  <div class="progress-bar bg-info" style="width: 20%">
    Testing 20%
  </div>
</div>

Las etiquetas dentro de cada barra permiten identificar claramente qué representa cada segmento del progreso total.

Efecto striped básico

El patrón rayado se aplica mediante la clase .progress-bar-striped al elemento .progress-bar, creando un efecto visual distintivo:

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-primary" style="width: 60%"></div>
</div>

Este patrón diagonal mejora la percepción de progreso y es especialmente útil para indicar procesos en curso o estados activos.

Combinación de barras striped y sólidas

Es posible combinar barras con y sin el efecto striped dentro del mismo contenedor para diferenciar estados:

<div class="progress">
  <div class="progress-bar bg-success" style="width: 40%">
    Completado
  </div>
  <div class="progress-bar progress-bar-striped bg-warning" style="width: 30%">
    En proceso
  </div>
</div>

Las barras sólidas representan trabajo completado, mientras que las rayadas indican tareas en progreso.

Casos prácticos con barras múltiples

Sistema de almacenamiento por categorías:

<div class="progress mb-3" style="height: 25px;">
  <div class="progress-bar bg-primary" style="width: 35%">
    Documentos 35%
  </div>
  <div class="progress-bar bg-success" style="width: 25%">
    Imágenes 25%
  </div>
  <div class="progress-bar bg-warning" style="width: 15%">
    Videos 15%
  </div>
  <div class="progress-bar bg-info" style="width: 10%">
    Otros 10%
  </div>
</div>
<p class="text-muted">Uso del disco: 85% de 500GB</p>

Progreso de desarrollo de proyecto:

<div class="progress mb-2">
  <div class="progress-bar bg-success" style="width: 45%">
    Diseño completado
  </div>
  <div class="progress-bar progress-bar-striped bg-primary" style="width: 30%">
    Desarrollo activo
  </div>
</div>
<small class="text-muted">Fase 1: 75% completado</small>

Niveles de habilidad con múltiples competencias

Las barras múltiples son ideales para mostrar diferentes habilidades o competencias de un usuario:

<!-- HTML/CSS -->
<div class="progress mb-2">
  <div class="progress-bar bg-info" style="width: 80%">HTML/CSS</div>
</div>

<!-- JavaScript -->
<div class="progress mb-2">
  <div class="progress-bar bg-warning" style="width: 65%">JavaScript</div>
</div>

<!-- Frameworks -->
<div class="progress mb-2">
  <div class="progress-bar bg-primary" style="width: 45%">Frameworks</div>
</div>

Progreso de carga de archivos múltiples

Este patrón es útil para mostrar el estado de múltiples archivos siendo procesados simultáneamente:

<div class="progress mb-2">
  <div class="progress-bar bg-success" style="width: 25%">
    archivo1.pdf ✓
  </div>
  <div class="progress-bar progress-bar-striped bg-primary" style="width: 35%">
    archivo2.jpg...
  </div>
</div>

<div class="progress mb-2">
  <div class="progress-bar bg-success" style="width: 40%">
    documento.docx ✓
  </div>
  <div class="progress-bar progress-bar-striped bg-info" style="width: 20%">
    video.mp4...
  </div>
</div>

Indicador de completitud de perfil detallado

Las barras múltiples permiten mostrar diferentes secciones de un perfil y su estado de completitud:

<div class="progress mb-3" style="height: 20px;">
  <div class="progress-bar bg-success" style="width: 20%">
    Info básica ✓
  </div>
  <div class="progress-bar bg-success" style="width: 15%">
    Contacto ✓
  </div>
  <div class="progress-bar progress-bar-striped bg-warning" style="width: 10%">
    Experiencia...
  </div>
</div>
<p><strong>Progreso del perfil:</strong> 45% completado</p>
<ul class="list-unstyled">
  <li>✓ Información básica</li>
  <li>✓ Datos de contacto</li>
  <li class="text-warning">⚠ Experiencia laboral (en progreso)</li>
  <li class="text-muted">○ Habilidades (pendiente)</li>
  <li class="text-muted">○ Portfolio (pendiente)</li>
</ul>

Monitorización de recursos del sistema

Las barras múltiples son perfectas para mostrar el uso de diferentes recursos:

<!-- Uso de CPU por procesos -->
<div class="progress mb-2">
  <div class="progress-bar bg-danger" style="width: 35%">
    Sistema 35%
  </div>
  <div class="progress-bar bg-warning" style="width: 25%">
    Navegador 25%
  </div>
  <div class="progress-bar bg-info" style="width: 15%">
    Editor 15%
  </div>
</div>
<small class="text-muted">CPU: 75% utilizado</small>

<!-- Memoria RAM -->
<div class="progress mb-2 mt-3">
  <div class="progress-bar progress-bar-striped bg-primary" style="width: 60%">
    Aplicaciones activas
  </div>
  <div class="progress-bar bg-secondary" style="width: 20%">
    Sistema
  </div>
</div>
<small class="text-muted">RAM: 80% de 16GB utilizada</small>

Personalización avanzada de altura

Para barras múltiples complejas, es común ajustar la altura para mejorar la legibilidad de las etiquetas:

<div class="progress" style="height: 30px;">
  <div class="progress-bar bg-primary" style="width: 30%">
    <strong>Ventas Q1</strong><br>
    <small>30%</small>
  </div>
  <div class="progress-bar progress-bar-striped bg-info" style="width: 25%">
    <strong>Ventas Q2</strong><br>
    <small>25% (activo)</small>
  </div>
</div>

Esta combinación de barras múltiples y efectos striped proporciona un sistema visual rico y expresivo para comunicar el progreso de procesos complejos, el estado de múltiples tareas simultáneas, y la distribución de recursos o categorías de manera clara e intuitiva.