Documentação e exemplos para usar as barras de progresso personalizadas do Bootstrap com suporte para barras empilhadas, planos de fundo animados e rótulos de texto.
Como funciona
Os componentes de progresso são construídos com dois elementos HTML, alguns CSS para definir a largura e alguns atributos. Não usamos o elemento HTML5<progress> , garantindo que você possa empilhar barras de progresso, animá-las e colocar rótulos de texto sobre elas.
Usamos o .progresscomo um wrapper para indicar o valor máximo da barra de progresso.
Usamos o interior .progress-barpara indicar o progresso até agora.
O .progress-barrequer um estilo embutido, classe de utilitário ou CSS personalizado para definir sua largura.
O .progress-bartambém requer alguns rolee ariaatributos para torná-lo acessível.
Junte tudo isso e você terá os seguintes exemplos.
Bootstrap fornece um punhado de utilitários para definir a largura . Dependendo de suas necessidades, eles podem ajudar a configurar rapidamente o progresso.
Rótulos
Adicione rótulos às suas barras de progresso colocando texto dentro do arquivo .progress-bar.
25%
Altura
Apenas definimos um heightvalor no .progress, portanto, se você alterar esse valor, o interno .progress-barserá redimensionado automaticamente de acordo.
Planos de fundo
Use classes de utilitários em segundo plano para alterar a aparência de barras de progresso individuais.
Várias barras
Inclua várias barras de progresso em um componente de progresso, se necessário.
Listrado
Adicione .progress-bar-stripeda qualquer .progress-barpara aplicar uma faixa via gradiente CSS sobre a cor de fundo da barra de progresso.
Listras animadas
O gradiente listrado também pode ser animado. Adicione .progress-bar-animateda .progress-barpara animar as listras da direita para a esquerda por meio de animações CSS3.