Bootstrap - Barras de progresso
Este capítulo discute sobre as barras de progresso do Bootstrap. O objetivo das barras de progresso é mostrar que os ativos estão sendo carregados, em andamento ou que há uma ação em andamento em relação aos elementos da página.
As barras de progresso usam transições e animações CSS3 para obter alguns de seus efeitos. Esses recursos não são suportados no Internet Explorer 9 e anteriores ou em versões anteriores do Firefox. O Opera 12 não oferece suporte a animações.
Barra de progresso padrão
Para criar uma barra de progresso básica -
Adicione um <div> com uma classe de .progress.
Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar.
Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.
Vamos ver um exemplo abaixo -
<div class = "progress">
<div class = "progress-bar" role = "progressbar" aria-valuenow = "60"
aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>Barra de progresso alternativa
Para criar uma barra de progresso com estilos diferentes -
Adicione um <div> com uma classe de .progress.
Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar e classe progress-bar-* onde * poderia estar success, info, warning, danger.
Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.
Vamos ver um exemplo abaixo -
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>Barra de progresso listrada
Para criar uma barra de progresso listrada -
Adicione um <div> com uma classe de .progress e .progress-striped.
Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar e classe progress-bar-* onde * poderia estar success, info, warning, danger.
Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.
Vamos ver um exemplo abaixo -
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>Barra de Progresso Animada
Para criar uma barra de progresso animada -
Adicione um <div> com uma classe de .progress e .progress-striped. Também adicionar classe.active para .progress-striped.
Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar.
Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.
Isso animará as listras da direita para a esquerda.
Vamos ver um exemplo abaixo -
<div class = "progress progress-striped active">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>Barra de progresso empilhada
Você pode até empilhar várias barras de progresso. Coloque as várias barras de progresso na mesma.progress para empilhá-los como visto no exemplo a seguir -
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>