Spinners
Indique o estado de carregamento de um componente ou página com spinners Bootstrap, construídos inteiramente com HTML, CSS e sem JavaScript.
Sobre
Bootstrap “spinners” podem ser usados para mostrar o estado de carregamento em seus projetos. 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, alinhamento e dimensionamento podem ser facilmente personalizados com nossas incríveis classes de utilidade.
Para fins de acessibilidade, cada carregador aqui inclui role="status"
um arquivo <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
consulta de mídia. Consulte a
seção de movimento reduzido de nossa documentação de acessibilidade .
Girador de borda
Use os giradores de borda para um indicador de carregamento leve.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Cores
O girador de borda usa currentColor
para border-color
isso, o que significa que você pode personalizar a cor com utilitários de cor de texto . Você pode usar qualquer um dos nossos utilitários de cores de texto no spinner padrão.
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
border-color
utilitários? Cada girador de borda especifica uma
transparent
borda para pelo menos um lado, então os
.border-{color}
utilitários substituiriam isso.
Girador crescente
Se você não gosta de um girador de borda, mude para o girador de cultivo. Embora tecnicamente não gire, cresce repetidamente!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Mais uma vez, este spinner é construído com currentColor
, para que você possa alterar facilmente sua aparência com utilitários de cor de texto . Aqui está em azul, junto com as variantes suportadas.
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
Alinhamento
Spinners no Bootstrap são construídos com rem
s, currentColor
, e display: inline-flex
. Isso significa que eles podem ser facilmente redimensionados, recoloridos e alinhados rapidamente.
Margem
Use utilitários de margem como .m-5
para espaçamento fácil.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Canal
Use utilitários flexbox , utilitários float ou utilitários de alinhamento de texto para colocar os spinners exatamente onde você precisa deles em qualquer situação.
Flexão
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
Flutuadores
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Alinhamento de texto
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Tamanho
Adicione .spinner-border-sm
e .spinner-grow-sm
para fazer um spinner menor que pode ser usado rapidamente em outros componentes.
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
Ou use CSS personalizado ou estilos embutidos para alterar as dimensões conforme necessário.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
Botões
Use spinners dentro dos botões para indicar que uma ação está sendo processada ou ocorrendo. Você também pode trocar o texto do elemento giratório e utilizar o texto do botão conforme necessário.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>