Indicar o estado de carregamento de um componente ou página com Bootstrap spinners, construído inteiramente com HTML, CSS, e sem JavaScript.
About
Bootstrap “spinners” podem ser usados para mostrar o estado de carregamento nos seus projectos. São construídos apenas com HTML e CSS, o que significa que não precisa de nenhum JavaScript para os criar. Precisará, no entanto, de algum JavaScript personalizado para alternar a sua visibilidade. A sua aparência, alinhamento e dimensionamento podem ser facilmente personalizados com as nossas incríveis classes de utilidade.
Para fins de acessibilidade, cada carregador aqui inclui role="status" e um aninhado <span class="sr-only">Loading...</span>.
Fiandeira de borda
Utiliza as máquinas de borda para um indicador de carga leve.
<div class="spinner-border" role="status"> <span class="sr-only">Loading...</span></div>Cores
O fiador de fronteira usa currentColor pelo seu border-color, o que significa que se pode personalizar a cor com utilitários de cor de texto. Pode usar qualquer um dos nossos utilitários de cor de texto no spinner padrão.
border-color utilidades? Cada spinner de borda especifica um transparent borda para pelo menos um lado, portanto .border-{color} utilitários anulariam isso.
Growing spinner
Se não gostar de um spinner de borda, mude para o grow spinner. Embora não gire tecnicamente, cresce repetidamente!
<div class="spinner-grow" role="status"> <span class="sr-only">Loading...</span></div>Once novamente, este spinner é construído com currentColor, para que possa facilmente mudar a sua aparência com utilitários de cor de texto. Aqui está em azul, juntamente com as variantes suportadas.
Alinhamento
P>Pinos em Bootstrap são construídos com rems, currentColor, e display: inline-flex. Isto significa que podem ser facilmente redimensionados, recolhidos e rapidamente alinhados.
Margin
Utilizar 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>Placement
Utilizar utilitários flexbox, utilitários float, ou utilitários de alinhamento de texto para colocar os spinners exactamente onde precisar deles em qualquer situação.
Flex
<div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div></div>Floats
<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
Adicionar .spinner-border-sm e .spinner-grow-sm para fazer um spinner mais pequeno que possa ser rapidamente utilizado dentro de outros componentes.
Or, usar estilos CSS personalizados ou em linha para alterar as dimensões conforme necessário.
Buttons
Utilizar spinners dentro dos botões para indicar que uma acção está actualmente a ser processada ou a ocorrer. Também pode trocar o texto fora do elemento spinner e utilizar o texto do botão conforme necessário.
0 comentários