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.
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 .placeholder
clase 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 .btn
s vía ::before
para garantizar que height
se 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.
<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>
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 width
clases de columnas de cuadrícula, las utilidades de ancho o los estilos en línea.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Color
Por defecto, los placeholder
usos 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>
Dimensionamiento
El tamaño de .placeholder
s se basa en el estilo tipográfico del elemento principal. Personalícelos 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
Anime 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>
Hablar con descaro a
Variables
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;