Estilo de barra de progresso no bootstrap 5

O significado de uma barra de progresso pode ser enfatizado pelo fato de manter seu usuário envolvido e informado sobre o progresso de um processo, como ao preencher um formulário longo que tenha várias etapas ou ao carregar uma página ou outra fonte. Aqui neste blog, resumimos para suas maneiras pelas quais você pode estilizar barras de progresso usando o bootstrap 5. Mas antes de pularmos para o seu estilo, vamos aprender a criar um.

Como criar uma barra de progresso

Com o objetivo de gerar uma barra de progresso, defina o .progresso Classe para o elemento antecessor enquanto isso, dê .Barra de progresso Para o elemento sucessor, enquanto a largura da barra de progresso é ajustada usando a propriedade de largura.

Html

A divis de pai foi fornecida o .classe de progresso, enquanto que a criança div .classe de barra de progresso. Por fim, usando a propriedade de largura, a largura da barra de progresso foi definida como 50%.

Saída

Uma barra de progresso foi gerada com sucesso.

Agora vamos aprender várias maneiras pelas quais você pode estilizar uma barra de progresso.

Como escalar uma barra de progresso

Por padrão, uma barra de progresso possui uma altura de 16px ou 1 -rema, mas, dependendo da sua preferência, você pode escalar a altura da barra de progresso para cima e para baixo. Para esse fim, defina a mesma altura para o antecessor div e o sucessor div.

Html

O código acima gerará duas barras de progresso, uma com uma altura de 20px e a segunda com altura de 40px. Observe que o contêiner de progresso e a barra de progresso receberam a mesma altura nos dois casos.

Saída

A saída mostra duas barras de progresso com alturas diferentes.

Como rotular uma barra de progresso

Como conhecemos uma barra de progresso, mostra o progresso de um processo, portanto, se você quiser mostrar esse progresso em números ou porcentagem, basta escrever um texto dentro da criança dividir.

Html

50%

A barra de progresso que está sendo criada no código acima tem um rótulo dizendo "50%". Este rótulo corresponde ao progresso do processo.

Saída

Uma gravadora foi atribuída com sucesso à barra de progresso.

Como colorir uma barra de progresso

Se você deseja fornecer cores a uma barra de progresso, basta atribuir as classes de cores de fundo ao contêiner da barra de progresso. As classes de cores de fundo são .BG-Primary, .BG-success, .BG-secundário, .BG-Info, .BG-caules, .BG-Danger, .BG-Light, .BG-Dark, .BG-Muted.

Html

Aqui estamos criando cinco barras de progresso, cada uma com uma largura e cor diferente.

Saída

O fornecimento de cores para as barras de progresso aumentará a beleza do site.

Como criar uma barra de progresso listrada

Outra coisa divertida que você pode fazer para estilizar uma barra de progresso é torná -la listrada e, por isso, atribuir o .Progresso-bar-listrado classe para o recipiente infantil.

Html

O código acima gerará uma barra de progresso listrada com 50% de largura.

Saída

É assim que uma barra de progresso listrada é criada.

Como animar uma barra de progresso

Animando uma barra de progresso fará com que o progresso dentro da barra pareça estar se movendo. Isso pode ser feito fornecendo o .Progresso-bar-animado classe para a barra de progresso junto com o .Progresso-bar-listrado aula.

Html

Aqui estamos criando uma barra de progresso animada listrada com 50% de largura.

Saída

Uma barra de progresso animada foi criada.

Como empilhar várias barras de progresso

Se você deseja empilhar várias barras de progresso, basta colocá -las dentro do contêiner de progresso.

Html

Primeiro
Segundo
Terceiro

O código acima empilhará três barras de progresso, cada uma com uma largura diferente.

Saída

A saída acima mostra três barras de progresso empilhadas.

Conclusão

No Bootstrap 5, uma barra de progresso pode ser criada atribuindo .progresso classe para o contêiner pai e .Barra de progresso classe para o recipiente infantil. Você escala a altura de uma barra de progresso, atribuindo a mesma altura aos recipientes pais e filhos. Uma barra de progresso pode ser rotulada colocando algum texto dentro dele, além disso, para criar barras de progresso coloridas usando as classes de cores de fundo. Além disso, você pode criar barras de progresso listradas e animadas usando o .Progresso-bar-listrado, e .Progresso-bar-animado classes respectivamente.