Placeholders

Acerca de

Los marcadores de posición (placeholders) se pueden utilizar para mejorar la experiencia de tu aplicación. Están construidos únicamente con HTML y CSS, lo que significa que no necesitas ningún JavaScript para crearlos. Sin embargo, necesitarás algo de JavaScript personalizado para alternar su visibilidad. Su apariencia, color y tamaño se pueden personalizar fácilmente con nuestras clases de utilidad.

Ejemplo

En el ejemplo a continuación, tomamos un componente de tarjeta típico y lo recreamos con marcadores de posición aplicados para crear una "tarjeta de carga". El tamaño y las proporciones son los mismos entre los dos.

<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Un texto de ejemplo rápido para construir sobre el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>

Cómo funciona

Crea marcadores de posición con la clase .placeholder y una clase de columna de cuadrícula (por ejemplo, .col-6) para establecer el ancho (width). Pueden reemplazar el texto dentro de un elemento o agregarse como una clase modificadora a un componente existente.

Aplicamos estilo adicional a los botones .btn a través de ::before para garantizar que se respete la altura (height). Puedes extender este patrón para otras situaciones según sea necesario, o agregar un   dentro del elemento para reflejar la altura cuando se renderice el texto real en su lugar.

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

<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>

Ancho

Puedes cambiar el ancho (width) a través de clases de columnas de cuadrícula (grid), utilidades de ancho o estilos en línea.

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

Color

De forma predeterminada, el placeholder utiliza currentColor. Esto se puede anular con un color personalizado o una clase de utilidad.

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

<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

Tamaños

El tamaño de los .placeholder se basa en el estilo tipográfico del elemento padre. Personalízalos con modificadores de tamaño: .placeholder-lg, .placeholder-sm o .placeholder-xs.

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

Animación

Anima los marcadores de posición con .placeholder-glow o .placeholder-wave para transmitir mejor la percepción de que algo se está cargando activamente.

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

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

CSS

Variables de Sass

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;