Marcadores de posición

Use marcadores de posición de carga para os seus compoñentes ou páxinas para indicar que aínda se está cargando algo.

Nesta páxina

Sobre

Os marcadores de posición pódense usar para mellorar a experiencia da túa aplicación. Están construídos só con HTML e CSS, o que significa que non necesitas JavaScript para crealos. Non obstante, necesitarás JavaScript personalizado para cambiar a súa visibilidade. O seu aspecto, cor e tamaño pódense personalizar facilmente coas nosas clases de utilidade.

Exemplo

No seguinte exemplo, tomamos un compoñente de tarxeta típico e recreámolo con marcadores de posición aplicados para crear unha "tarxeta de carga". O tamaño e as proporcións son os mesmos entre ambos.

Título da tarxeta

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Vai a algún lado

<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 coa .placeholderclase e unha clase de columna de grade (por exemplo, .col-6) para establecer o width. Poden substituír o texto dentro dun elemento ou engadirse como clase modificadora a un compoñente existente.

Aplicamos un estilo adicional a .btns via ::beforepara garantir heightque se respecte. Podes estender este patrón a outras situacións segundo sexa necesario ou engadir un  dentro do elemento para reflectir a altura cando o texto real se representa no seu 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>

O uso de aria-hidden="true"só indica que o elemento debe ocultarse aos lectores de pantalla. O comportamento de carga do marcador de posición depende de como os autores usen realmente os estilos do marcador de posición, de como planean actualizar cousas, etc. É posible que se necesite algún código JavaScript para intercambiar o estado do marcador de posición e informar aos usuarios de AT sobre a actualización.

Anchura

Pode cambiar as widthclases de columnas de cuadrícula, as utilidades de ancho ou os estilos en liña.

html

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

Cor

Por defecto, placeholderusa currentColor. Isto pódese substituír cunha cor personalizada ou cunha clase de utilidade.

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>

Talla

O tamaño de .placeholders baséase no estilo tipográfico do elemento principal. Personalízaos con modificadores de tamaño: .placeholder-lg, .placeholder-sm, ou .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 os marcadores de posición con .placeholder-glowou .placeholder-wavepara transmitir mellor a percepción de algo que 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>

Sass

Variables

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