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>.
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 currentColorpara border-colorisso, 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>Por que não usar border-colorutilitários? Cada girador de borda especifica uma transparentborda 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 rems, 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-5para 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-sme .spinner-grow-smfaça um spinner menor que possa 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>