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.
Carregando...
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.
Carregando...
Carregando...
Carregando...
Carregando...
Carregando...
Carregando...
Carregando...
Carregando...
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!
Carregando...
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.
Carregando...
Carregando...
Carregando...
Carregando...
Carregando...
Carregando...
Carregando...
Carregando...
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.
Adicione .spinner-border-sme .spinner-grow-smpara fazer um spinner menor que pode ser usado rapidamente em outros componentes.
Carregando...
Carregando...
Ou use CSS personalizado ou estilos embutidos para alterar as dimensões conforme necessário.
Carregando...
Carregando...
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.