Marcadores de posición

Usa marcadores de posición de carga para tus componentes o páginas para indicar que es posible que aún se esté cargando algo.

Acerca de

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

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.

HTML

<div class="card">
    <svg class="bd-placeholder-img card-img-top" width="100%" height="180" role="img"
        aria-label="Marcador de posición" focusable="false" preserveAspectRatio="xMidYMid slice"
        xmlns="http://www.w3.org/2000/svg">
        <title>Marcador de posición</title>
        <rect width="100%" height="100%" fill="#20c997"></rect>
    </svg>
    <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 desarrollar el título de la tarjeta y constituir la
            mayor parte del contenido de la tarjeta.</p>
        <a href="#" class="btn btn-primary">Ve a algún lado</a>
    </div>
</div>
<div class="card" aria-hidden="true">
    <svg class="bd-placeholder-img card-img-top" width="100%" height="180" role="img"
        aria-label="Marcador de posición" focusable="false" preserveAspectRatio="xMidYMid slice"
        xmlns="http://www.w3.org/2000/svg">
        <title>Marcador de posición</title>
        <rect width="100%" height="100%" fill="#868e96"></rect>
    </svg>
    <div class="card-body">
        <div class="h5 card-title placeholder-glow">
            <span class="placeholder col-6"></span>
        </div>
        <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 width. Pueden reemplazar el texto dentro de un elemento o agregarse como una clase modificadora a un componente existente.

Aplicamos estilos adicionales a los .btn mediante ::before para garantizar que la height sea respetado. Puedes ampliar 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 representa 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 estar oculto para los lectores de pantalla. El comportamiento de carga del marcador de posición depende de cómo los autores utilizarán realmente los estilos del marcador de posición, cómo planean actualizar las cosas, etc. Es posible que se necesite algo de código JavaScript (opens in a new tab) para intercambiar el estado del marcador de posición e informar a los usuarios de AT de la actualización.

Ancho

Puedes cambiar el width mediante clases de columnas de cuadrícula, utilidades de ancho o 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

De forma predeterminada, el placeholder usa currentColor. Esto se puede sobrescribir 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>

Tamaños

El tamaño de los .placeholderse basa en el estilo tipográfico del elemento principal. 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 marcadores de posición con .placeholder-glow o .placeholder-wave para transmitir mejor la percepción de que algo está activamente cargado.

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 (opens in a new tab)

scss/_variables.scss

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

Paginación Popovers