Marcadors de posició

Utilitzeu marcadors de posició de càrrega per als vostres components o pàgines per indicar que alguna cosa encara s'està carregant.

En aquesta pàgina

Sobre

Els marcadors de posició es poden utilitzar per millorar l'experiència de la vostra aplicació. Només es construeixen amb HTML i CSS, és a dir, no necessiteu cap JavaScript per crear-los. Tanmateix, necessitareu JavaScript personalitzat per canviar-ne la visibilitat. El seu aspecte, color i mida es poden personalitzar fàcilment amb les nostres classes d'utilitat.

Exemple

A l'exemple següent, agafem un component de targeta típic i el recreem amb marcadors de posició aplicats per crear una "targeta de càrrega". La mida i les proporcions són les mateixes entre els dos.

Títol de la targeta

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Anar a algun lloc

<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>

Com funciona

Creeu marcadors de posició amb la .placeholderclasse i una classe de columna de quadrícula (per exemple, .col-6) per establir el fitxer width. Poden substituir el text dins d'un element o afegir-se com a classe modificadora a un component existent.

Apliquem un estil addicional a .btns via ::beforeper garantir que heightes respecta. Podeu ampliar aquest patró per a altres situacions segons sigui necessari o afegir un  dins de l'element per reflectir l'alçada quan el text real es representa al seu lloc.

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>

L'ús de aria-hidden="true"només indica que l'element s'ha d'ocultar als lectors de pantalla. El comportament de càrrega del marcador de posició depèn de com els autors utilitzaran realment els estils de marcador de posició, de com pensen actualitzar les coses, etc. Pot ser que calgui algun codi JavaScript per canviar l'estat del marcador de posició i informar els usuaris d'AT de l'actualització.

Amplada

Podeu canviar les widthclasses de columna de la quadrícula, les utilitats d'amplada o els estils en línia.

html

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

Color

Per defecte, els placeholderusos currentColor. Això es pot substituir amb un color personalitzat o una classe d'utilitat.

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

La mida de .placeholders es basa en l'estil tipogràfic de l'element pare. Personalitzeu-los amb modificadors de mida: .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ó

Animeu els marcadors de posició amb .placeholder-glowo .placeholder-waveper transmetre millor la percepció d'alguna cosa que es carrega activament .

html

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

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

Sass

Les variables

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