Placeholders y spinners

Placeholders básicos y formas

Los placeholders son elementos temporales que simulan contenido real mientras se carga la información definitiva. En Bootstrap, estos componentes utilizan la clase base .placeholder para crear bloques rectangulares que representan texto, imágenes o cualquier contenido que aún no está disponible.

Estructura fundamental de placeholders

La implementación más básica requiere únicamente la clase .placeholder aplicada a un elemento span:

<p>
  <span class="placeholder col-6"></span>
</p>

<p>
  <span class="placeholder col-8"></span>
</p>

<p>
  <span class="placeholder col-12"></span>
</p>

Los placeholders utilizan las clases de grid que ya conoces para definir su ancho. La clase col-6 hace que el placeholder ocupe la mitad del ancho disponible, mientras que col-12 lo extiende completamente.

Placeholders para diferentes tipos de contenido

Simulación de párrafos de texto:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
    </p>
  </div>
</div>

Placeholders en botones:

<button class="btn btn-primary disabled">
  <span class="placeholder col-4"></span>
</button>

<button class="btn btn-secondary disabled">
  <span class="placeholder col-6"></span>
</button>

Simulación de imágenes:

<div class="card">
  <div class="placeholder" style="height: 200px;"></div>
  <div class="card-body">
    <h5 class="card-title">
      <span class="placeholder col-6"></span>
    </h5>
  </div>
</div>

Variaciones de forma y anchura

Bootstrap proporciona diferentes variaciones de ancho usando las clases de columnas del sistema de grid:

<!-- Diferentes anchos de placeholder -->
<span class="placeholder col-1"></span>
<span class="placeholder col-2"></span>
<span class="placeholder col-3"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-5"></span>
<span class="placeholder col-6"></span>

También puedes usar clases de ancho específicas para mayor precisión:

<span class="placeholder w-75"></span>
<span class="placeholder w-50"></span>
<span class="placeholder w-25"></span>

Placeholders en componentes complejos

Esqueleto completo de una card:

<div class="card">
  <div class="placeholder bg-secondary" style="height: 180px;"></div>
  <div class="card-body">
    <h5 class="card-title">
      <span class="placeholder col-8"></span>
    </h5>
    <p class="card-text">
      <span class="placeholder col-12"></span>
      <span class="placeholder col-7"></span>
      <span class="placeholder col-9"></span>
    </p>
    <div class="d-flex justify-content-between align-items-center">
      <div class="btn-group">
        <button class="btn btn-sm btn-outline-secondary disabled">
          <span class="placeholder col-4"></span>
        </button>
      </div>
      <small class="text-muted">
        <span class="placeholder col-3"></span>
      </small>
    </div>
  </div>
</div>

Placeholders en listas:

<div class="list-group">
  <div class="list-group-item">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">
        <span class="placeholder col-4"></span>
      </h5>
      <small>
        <span class="placeholder col-2"></span>
      </small>
    </div>
    <p class="mb-1">
      <span class="placeholder col-8"></span>
      <span class="placeholder col-6"></span>
    </p>
  </div>
  
  <div class="list-group-item">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">
        <span class="placeholder col-5"></span>
      </h5>
      <small>
        <span class="placeholder col-2"></span>
      </small>
    </div>
    <p class="mb-1">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
    </p>
  </div>
</div>

Placeholders en tablas

Los placeholders también resultan útiles para simular contenido tabular mientras se cargan los datos:

<table class="table">
  <thead>
    <tr>
      <th scope="col">Producto</th>
      <th scope="col">Precio</th>
      <th scope="col">Estado</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="placeholder col-6"></span></td>
      <td><span class="placeholder col-3"></span></td>
      <td><span class="placeholder col-4"></span></td>
    </tr>
    <tr>
      <td><span class="placeholder col-8"></span></td>
      <td><span class="placeholder col-3"></span></td>
      <td><span class="placeholder col-4"></span></td>
    </tr>
    <tr>
      <td><span class="placeholder col-5"></span></td>
      <td><span class="placeholder col-3"></span></td>
      <td><span class="placeholder col-4"></span></td>
    </tr>
  </tbody>
</table>

La flexibilidad de los placeholders radica en su capacidad para adaptarse a cualquier componente que ya dominas. Su estructura simple basada en clases de grid te permite crear esqueletos realistas que mantienen las proporciones y la jerarquía visual del contenido final, mejorando significativamente la percepción de velocidad de carga de tu aplicación.

Spinners y indicadores de carga

Los spinners son animaciones circulares que indican procesos en curso o estados de carga activos. Bootstrap proporciona dos tipos principales de spinners que se diferencian tanto en su apariencia visual como en su implementación técnica.

Spinner border básico

El spinner border utiliza la clase .spinner-border para crear una animación de rotación basada en un borde circular:

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Esta implementación básica muestra un círculo con borde discontinuo que gira continuamente. El elemento span con visually-hidden proporciona información accesible para lectores de pantalla sin ser visible en la interfaz.

Spinner grow alternativo

El spinner grow emplea la clase .spinner-grow para generar una animación de pulsación:

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Este tipo produce un efecto de crecimiento y reducción del elemento, creando una animación más sutil que el spinner border tradicional.

Diferencias visuales y contextos de uso

Cuándo usar spinner border:

• Procesos de carga de datos extensos
• Formularios durante envío de información
• Carga inicial de páginas o secciones
• Indicadores prominentes que requieren mayor visibilidad

Cuándo usar spinner grow:

• Procesos breves o acciones rápidas
• Contextos donde se prefiere una animación más discreta
• Elementos que necesitan indicar actividad sin ser intrusivos
• Combinación con otros elementos de interfaz delicados

Aplicación de colores predefinidos

Los spinners adoptan los colores semánticos que ya conoces mediante las clases de utilidad estándar:

<!-- Spinner border con colores -->
<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Aplicación similar para spinner grow:

<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Variaciones de tamaño

Bootstrap incluye modificadores de tamaño específicos para ajustar las dimensiones de los spinners:

<!-- Spinners pequeños -->
<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

También puedes emplear las utilidades de dimensionado estándar para mayor control:

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Integración con botones

Los spinners resultan especialmente útiles dentro de botones durante procesos activos:

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status"></span>
  <span class="visually-hidden">Loading...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status"></span>
  Procesando...
</button>

<button class="btn btn-success" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status"></span>
  Guardando datos
</button>

Spinners en componentes cards

La integración con cards permite crear indicadores contextuales durante la carga de contenido:

<div class="card">
  <div class="card-body text-center">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <p class="card-text mt-3">Cargando información del producto...</p>
  </div>
</div>

Card con spinner centrado y mensaje descriptivo:

<div class="card">
  <div class="card-header">
    <h5 class="card-title mb-0">Datos del usuario</h5>
  </div>
  <div class="card-body d-flex flex-column align-items-center py-5">
    <div class="spinner-grow text-info mb-3" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <p class="text-muted mb-0">Obteniendo información...</p>
  </div>
</div>

Grupos de spinners múltiples

Puedes combinar múltiples spinners para crear indicadores más elaborados:

<div class="d-flex align-items-center">
  <div class="spinner-grow spinner-grow-sm text-primary me-1" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-grow spinner-grow-sm text-primary me-1" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
  <div class="spinner-grow spinner-grow-sm text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
  <span class="ms-2">Sincronizando datos</span>
</div>

Spinners en contextos de navegación

Los indicadores de carga también funcionan efectivamente en elementos de navegación:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Mi Aplicación</a>
    <div class="d-flex align-items-center">
      <div class="spinner-border spinner-border-sm text-secondary me-2" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <small class="text-muted">Actualizando...</small>
    </div>
  </div>
</nav>

Combinación con utilidades de posicionamiento

Los spinners se integran perfectamente con las utilidades de posicionamiento que dominas:

<div class="position-relative">
  <table class="table">
    <thead>
      <tr>
        <th>Producto</th>
        <th>Precio</th>
        <th>Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="3" class="text-center py-5">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <p class="mt-3 mb-0">Cargando productos...</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

La versatilidad de los spinners reside en su capacidad para integrarse naturalmente con todos los componentes que has aprendido, proporcionando retroalimentación visual inmediata sobre el estado de los procesos en tu aplicación sin requerir configuración adicional compleja.

Personalización de colores y tamaño

La personalización de placeholders y spinners permite adaptar estos elementos a la identidad visual de tu proyecto y crear experiencias de carga más coherentes con el diseño general. Bootstrap proporciona múltiples enfoques para modificar tanto la apariencia cromática como las dimensiones de estos indicadores.

Colores personalizados en placeholders

Los placeholders aceptan las clases de color de fondo que ya dominas para personalizar su apariencia:

<p>
  <span class="placeholder col-7 bg-primary"></span>
</p>
<p>
  <span class="placeholder col-4 bg-success"></span>
</p>
<p>
  <span class="placeholder col-6 bg-info"></span>
</p>
<p>
  <span class="placeholder col-5 bg-warning"></span>
</p>
<p>
  <span class="placeholder col-8 bg-danger"></span>
</p>

Aplicación de colores en esqueletos de cards:

<div class="card">
  <div class="placeholder bg-info" style="height: 200px;"></div>
  <div class="card-body">
    <h5 class="card-title">
      <span class="placeholder col-6 bg-primary"></span>
    </h5>
    <p class="card-text">
      <span class="placeholder col-12 bg-secondary"></span>
      <span class="placeholder col-7 bg-secondary"></span>
    </p>
  </div>
</div>

Gradaciones de color y opacidad

Puedes emplear las utilidades de opacidad para crear placeholders con diferentes intensidades visuales:

<p>
  <span class="placeholder col-12 bg-primary"></span>
</p>
<p>
  <span class="placeholder col-12 bg-primary opacity-75"></span>
</p>
<p>
  <span class="placeholder col-12 bg-primary opacity-50"></span>
</p>
<p>
  <span class="placeholder col-12 bg-primary opacity-25"></span>
</p>

Combinación con colores de texto para mayor contraste:

<div class="bg-dark p-3">
  <p>
    <span class="placeholder col-8 bg-light"></span>
  </p>
  <p>
    <span class="placeholder col-6 bg-light opacity-75"></span>
  </p>
  <p>
    <span class="placeholder col-4 bg-light opacity-50"></span>
  </p>
</div>

Personalización de tamaños en placeholders

Los placeholders ofrecen modificadores específicos de tamaño que alteran su altura manteniendo el ancho definido por las clases de grid:

<p>
  <span class="placeholder col-6 placeholder-xs"></span>
</p>
<p>
  <span class="placeholder col-6 placeholder-sm"></span>
</p>
<p>
  <span class="placeholder col-6"></span>
</p>
<p>
  <span class="placeholder col-6 placeholder-lg"></span>
</p>

Aplicación de dimensiones personalizadas mediante CSS inline:

<div class="card">
  <div class="placeholder bg-secondary" style="height: 300px;"></div>
  <div class="card-body">
    <h5 class="card-title">
      <span class="placeholder col-8" style="height: 1.5rem;"></span>
    </h5>
    <p class="card-text">
      <span class="placeholder col-12" style="height: 0.8rem;"></span>
      <span class="placeholder col-9" style="height: 0.8rem;"></span>
    </p>
  </div>
</div>

Animaciones personalizadas para placeholders

Bootstrap incluye la clase .placeholder-glow para añadir efectos de animación a los placeholders:

<div class="placeholder-glow">
  <span class="placeholder col-7 bg-secondary"></span>
  <span class="placeholder col-4 bg-secondary"></span>
  <span class="placeholder col-4 bg-secondary"></span>
  <span class="placeholder col-6 bg-secondary"></span>
</div>

Animación de ondas con .placeholder-wave:

<div class="placeholder-wave">
  <span class="placeholder col-6 bg-primary"></span>
  <span class="placeholder col-8 bg-primary"></span>
  <span class="placeholder col-5 bg-primary"></span>
</div>

Dimensionado avanzado de spinners

Más allá de las clases predefinidas, puedes aplicar utilidades de dimensionado específicas para crear spinners de tamaños personalizados:

<!-- Utilizando clases de ancho y alto -->
<div class="spinner-border w-25 h-25 text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-grow w-50 h-50 text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Dimensiones específicas con CSS personalizado:

<div class="spinner-border text-info" style="width: 4rem; height: 4rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-grow text-warning" style="width: 5rem; height: 5rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Personalización cromática de spinners con CSS variables

Para colores completamente personalizados en spinners, puedes emplear propiedades CSS personalizadas:

<div class="spinner-border" style="color: #ff6b35;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-grow" style="color: #4ecdc4;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Spinners con degradados mediante utilidades de fondo:

<div class="spinner-border bg-gradient" style="background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); color: transparent; border: 3px solid transparent;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Combinación coherente de colores y tamaños

La consistencia visual se logra aplicando el mismo esquema cromático a placeholders y spinners relacionados:

<div class="card">
  <div class="card-body">
    <!-- Estado de carga inicial -->
    <div class="text-center mb-3">
      <div class="spinner-border text-primary" style="width: 2rem; height: 2rem;" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
    
    <!-- Placeholders con colores coherentes -->
    <div class="placeholder-glow">
      <h5 class="card-title">
        <span class="placeholder col-6 bg-primary opacity-25"></span>
      </h5>
      <p class="card-text">
        <span class="placeholder col-12 bg-primary opacity-25 placeholder-sm"></span>
        <span class="placeholder col-8 bg-primary opacity-25 placeholder-sm"></span>
      </p>
    </div>
  </div>
</div>

Esquemas cromáticos contextuales

Puedes crear paletas específicas para diferentes tipos de contenido o estados de la aplicación:

<!-- Esquema para datos financieros -->
<div class="row">
  <div class="col-md-4">
    <div class="card border-success">
      <div class="card-body">
        <div class="d-flex align-items-center mb-2">
          <div class="spinner-grow spinner-grow-sm text-success me-2" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <span class="text-muted">Ingresos</span>
        </div>
        <div class="placeholder-wave">
          <span class="placeholder col-8 bg-success opacity-50"></span>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-md-4">
    <div class="card border-danger">
      <div class="card-body">
        <div class="d-flex align-items-center mb-2">
          <div class="spinner-grow spinner-grow-sm text-danger me-2" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <span class="text-muted">Gastos</span>
        </div>
        <div class="placeholder-wave">
          <span class="placeholder col-6 bg-danger opacity-50"></span>
        </div>
      </div>
    </div>
  </div>
</div>

La flexibilidad de personalización permite que placeholders y spinners se integren perfectamente con la identidad visual de tu proyecto, manteniendo la funcionalidad de retroalimentación mientras respetan las decisiones de diseño específicas de cada aplicación.