Marcadores de posición

Use marcadores de posición de carga para sus componentes o páginas para indicar que algo aún se puede estar cargando.

En esta página

Sobre

Los marcadores de posición se pueden utilizar para mejorar la experiencia de su aplicación. Están construidos solo con HTML y CSS, lo que significa que no necesita JavaScript para crearlos. Sin embargo, necesitará 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 siguiente ejemplo, 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.

Título de la tarjeta

Un texto de ejemplo rápido para construir sobre el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Ir a alguna parte

<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 href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

Cómo funciona

Cree marcadores de posición con la .placeholderclase y una clase de columna de cuadrícula (p. ej., .col-6) para establecer el width. Pueden reemplazar el texto dentro de un elemento o agregarse como una clase de modificador a un componente existente.

Aplicamos estilo adicional a .btns vía ::beforepara garantizar que heightse respete. Puede extender este patrón para otras situaciones según sea necesario, o agregar un  dentro del elemento para reflejar la altura cuando el texto real se represente en su lugar.

html

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

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>

El uso de aria-hidden="true"only indica que el elemento debe estar oculto para los lectores de pantalla. El comportamiento de carga del marcador de posición depende de cómo los autores realmente usen los estilos de marcador de posición, cómo planean actualizar las cosas, etc. Es posible que se necesite algún código JavaScript para cambiar el estado del marcador de posición e informar a los usuarios de AT sobre la actualización.

Ancho

Puede cambiar las widthclases de columnas de cuadrícula, las utilidades de ancho o los estilos en línea.

html

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

Color

Por defecto, los placeholderusos currentColor. Esto se puede anular con un color personalizado o una clase de utilidad.

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>

Dimensionamiento

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

Anime marcadores de posición con .placeholder-glowo .placeholder-wavepara 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>

Hablar con descaro a

Variables

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