Estilos de girador

Spinners ou carregadores se mostram úteis quando o usuário precisa esperar enquanto carrega uma página da web. Esses spinners ajudam. Sem isso, o usuário pode fechar a página antes de carregar. Este blog destaca como os spinners são criados e estilizados usando o bootstrap 5.

Como criar spinners usando o bootstrap 5

Com o objetivo de criar um spinner, basta atribuir o .Spinner-Border classe para os elementos em que você deseja adicionar o spinner.

Html

Este é um girador

Aqui estamos inserindo um spinner dentro de um recipiente de div, que é mais embrulhado dentro de outro contêiner div.

Saída

Um spinner também é referido como carregador.

Como fazer spinners coloridos

Você pode estilizar seus spinners usando as aulas de utilitários de cores disponíveis no bootstrap 5. Aqui usamos todas essas classes para fazer spinners coloridos

Html

O código acima gerará um total de 9 spinners cada um com uma cor diferente.

Saída

É assim que você pode fazer spinners coloridos.

Como criar giradores crescentes

Outra maneira de estilizar seu girador é dar um efeito crescente em vez de um efeito giratório. Para atribuir ao seu spinner um efeito crescente, use o .Grow-grow aula.

Html

Como mostrado no trecho de código acima, você pode usar todas as classes de utilitário de cores junto com o .classe de girador para criar giradores crescentes.

Saída

Um efeito crescente foi adicionado com sucesso aos spinners.

Como escalar o tamanho do girador

Com o objetivo de fazer um spinner menor em tamanho do que o tamanho padrão, use o .Spinner-Border-SM aula ou se você quiser fazer um pequeno girador de crescimento, use o .Spinner-Grow-Sm.

Html

O trecho de código gerará os dois tipos de spinners que estão girando e crescendo, tendo um tamanho pequeno.

Saída

A saída mostra os spinners menores em tamanho em comparação com o tamanho padrão.

Como adicionar spinners aos botões

Muitas vezes, queremos adicionar spinners aos botões em situações quando o usuário precisa esperar que a fonte seja carregada depois de clicar no botão. Aqui está como você pode adicionar spinners aos botões.

Html

Espere…

No código acima, o primeiro botão adiciona um pequeno spinner de tamanho sem qualquer texto. O spinner foi criado atribuindo as classes relevantes ao elemento. Enquanto isso, o segundo botão adiciona um botão crescente de tamanho pequeno com texto.

Saída

Seguindo as abordagens discutidas acima, você pode criar, estilo e adicionar spinners a vários elementos.

Conclusão

Um spinner é criado usando o .Spinner-Border aula, enquanto isso para estilizar o girador que você pode usar várias classes de cores de texto disponíveis .Primary de texto, .Text-Info, .Texto-sucesso, .Texto-secundário, .Mutado por texto, .luz de texto, .Danger de texto, .escuro em texto, e .envergonhamento de texto. Para dar ao girador um efeito crescente, use o .Grow-grow aula, além disso, para criar um spinner de pequeno porte, use o .Spinner-Border-SM, ou .Spinner-Grow-Sm Aulas. Além disso, para adicionar spinners aos botões, abrange -os dentro do elemento.