Añadido en v5.1 Ver en GitHub

Placeholders

Usa placeholders de carga (skeleton loaders) para tus componentes o páginas para indicar que algo puede estar cargándose todavía.

On this page

Acerca de

Los placeholders se pueden usar para mejorar la experiencia de tu aplicación. Están construidos solo con HTML y CSS, lo que significa que no necesitas 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 utilitarias.

Ejemplo

En el ejemplo de abajo, tomamos un componente de tarjeta típico y lo recreamos con placeholders aplicados para crear una “tarjeta de carga”. El tamaño y las proporciones son las mismas entre ambos.

Título de card

Algún texto de ejemplo rápido para construir sobre el título de la tarjeta y formar la mayor parte del contenido de la tarjeta.

Ir a algún lugar

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

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</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 placeholders con la clase .placeholder y una clase de columna de grid (p. ej., .col-6) para establecer el width. Pueden reemplazar el texto dentro de un elemento o añadirse como una clase modificadora a un componente existente.

Aplicamos estilos adicionales a los .btn mediante ::before para asegurar que se respete el height. Puedes extender este patrón para otras situaciones según sea necesario, o añadir un dentro del elemento para reflejar la altura cuando se renderice texto real en su lugar.

html

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

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

El uso de aria-hidden="true" solo indica que el elemento debe ocultarse a los lectores de pantalla. El comportamiento de carga del placeholder depende de cómo los autores usen realmente los estilos del placeholder, cómo planeen actualizar las cosas, etc. Puede que se necesite algo de código JavaScript para intercambiar el estado del placeholder e informar a los usuarios de AT de la actualización.

Ancho

Puedes cambiar el width mediante clases de columnas de grid, utilidades de width, o estilos inline.

html

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

Color

Por defecto, el placeholder usa currentColor. Esto se puede sobrescribir con un color personalizado o una clase utilitaria.

html

<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 .placeholders se basa en el estilo tipográfico del elemento padre. Personalízalos con modificadores de tamaño: .placeholder-lg, .placeholder-sm, o .placeholder-xs.

html

<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 placeholders con .placeholder-glow o .placeholder-wave para transmitir mejor la percepción de que algo se está cargando activamente.

html

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

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

CSS

Variables Sass

scss/_variables.scss

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