Espaços reservados

Use espaços reservados de carregamento para seus componentes ou páginas para indicar que algo ainda pode estar sendo carregado.

Nesta página

Sobre

Os espaços reservados podem ser usados para aprimorar a experiência do seu aplicativo. Eles são construídos apenas com HTML e CSS, o que significa que você não precisa de nenhum JavaScript para criá-los. No entanto, você precisará de algum JavaScript personalizado para alternar sua visibilidade. Sua aparência, cor e tamanho podem ser facilmente personalizados com nossas classes de utilidade.

Exemplo

No exemplo abaixo, pegamos um componente de cartão típico e o recriamos com espaços reservados aplicados para criar um “cartão de carregamento”. O tamanho e as proporções são os mesmos entre os dois.

Título do cartão

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Ir a algum lugar

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

Como funciona

Crie espaços reservados com a .placeholderclasse e uma classe de coluna de grade (por exemplo, .col-6) para definir o width. Eles podem substituir o texto dentro de um elemento ou ser adicionados como uma classe modificadora a um componente existente.

Aplicamos um estilo adicional ao .btns via ::beforepara garantir que o heightseja respeitado. Você pode estender esse padrão para outras situações conforme necessário ou adicionar um  dentro do elemento para refletir a altura quando o texto real for renderizado em 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"apenas indica que o elemento deve ser ocultado para leitores de tela. O comportamento de carregamento do placeholder depende de como os autores realmente usarão os estilos do placeholder, como eles planejam atualizar as coisas, etc. Algum código JavaScript pode ser necessário para trocar o estado do placeholder e informar os usuários AT sobre a atualização.

Largura

Você pode alterar as widthclasses de coluna da grade, utilitários de largura ou estilos embutidos.

html

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

Cor

Por padrão, o placeholderusa currentColor. Isso pode ser substituído por uma cor personalizada ou classe de utilitário.

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>

Dimensionamento

O tamanho de .placeholders é baseado no estilo tipográfico do elemento pai. Personalize-os com modificadores de dimensionamento: .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>

Animação

Animar espaços reservados com .placeholder-glowou .placeholder-wavepara transmitir melhor a percepção de algo sendo carregado ativamente .

html

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

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

Sass

Variáveis

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