Espaços reservados
Use espaços reservados de carregamento para seus componentes ou páginas para indicar que algo ainda pode estar sendo carregado.
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 .placeholder
classe 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 .btn
s via ::before
para garantir que o height
seja 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.
<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"
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 width
classes de coluna da grade, utilitários de largura ou estilos embutidos.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Cor
Por padrão, o placeholder
usa currentColor
. Isso pode ser substituído por uma cor personalizada ou classe de utilitário.
<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 .placeholder
s é baseado no estilo tipográfico do elemento pai. Personalize-os com modificadores de dimensionamento: .placeholder-lg
, .placeholder-sm
, ou .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>
Animação
Animar espaços reservados com .placeholder-glow
ou .placeholder-wave
para transmitir melhor a percepção de algo sendo carregado ativamente .
<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;