Bootstrap 4 - Progresso
Descrição
A barra de progresso mostra o andamento de um processo com barras empilhadas, fundos animados e rótulos de texto.
Barra de progresso básico
A barra de progresso básica pode ser criada adicionando o elemento <div> com uma classe de .progress e adicionando a classe .progress-bar dentro de seu elemento filho. 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%.
O exemplo a seguir demonstra isso -
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Basic Progress Bar</h2>
<br>
<div class = "progress">
<div class = "progress-bar" style = "width:85%"></div>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -
Resultado
Altura da barra de progresso e rótulos
Você pode alterar a altura da barra de progresso definindo o valor da propriedade height . Coloque o texto dentro da classe .progress-bar para adicionar o rótulo da barra de progresso. O exemplo a seguir demonstra isso -
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Progress Bar Height</h2>
<div class = "progress" style = "height: 15px;">
<div class = "progress-bar" role = "progressbar" style = "width: 35%;"
aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<br>
<div class = "progress" style = "height: 25px;">
<div class = "progress-bar" role = "progressbar" style = "width: 55%;"
aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<br>
<div class = "progress" style = "height: 30px;">
<div class = "progress-bar" role = "progressbar" style = "width: 75%;"
aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>
<br>
<h2>Progress Bar Labels</h2>
<div class = "progress">
<div class = "progress-bar" role = "progressbar" style = "width: 55%;"
aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100">
55% Complete
</div>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -
Resultado
Barras de progresso coloridas
A cor das barras de progresso pode ser alterada usando classes contextuais, como bg-success , bg-info , bg-warning e bg-danger como mostrado no exemplo abaixo -
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Colored Progress Bars</h2>
<div class = "progress">
<div class = "progress-bar bg-success" role = "progressbar"
style = "width: 15%" aria-valuenow = "15" aria-valuemin = "0"
aria-valuemax = "100"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-info" role = "progressbar"
style = "width: 35%" aria-valuenow = "35" aria-valuemin = "0"
aria-valuemax = "100"></div>
</div>
<br>
<div class="progress">
<div class = "progress-bar bg-warning" role = "progressbar"
style = "width: 65%" aria-valuenow = "65" aria-valuemin = "0"
aria-valuemax = "100"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-danger" role = "progressbar"
style = "width: 95%" aria-valuenow = "95" aria-valuemin = "0"
aria-valuemax = "100"></div>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -
Resultado
Barras de progresso listradas
Você pode adicionar listras às barras de progresso adicionando a classe .progress-bar-stripes no elemento <div> com uma classe de .progress-bar .
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Striped Progress Bars</h2>
<div class = "progress">
<div class = "progress-bar progress-bar-striped" style = "width:20%"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-success progress-bar-striped"
style = "width:30%"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-info progress-bar-striped"
style = "width:40%"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-warning progress-bar-striped"
style = "width:50%"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-danger progress-bar-striped"
style = "width:60%"></div>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -
Resultado
Barras de progresso animadas
Você pode adicionar animate às barras de progresso adicionando classe .progress-bar-animated no elemento <div> com uma classe de .progress-bar .
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Animated Progress Bars</h2>
<div class = "progress">
<div class = "progress-bar progress-bar-striped progress-bar-animated"
style = "width:30%"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-success progress-bar-striped progress-bar-animated"
style = "width:60%"></div>
</div>
<br>
<div class = "progress">
<div class = "progress-bar bg-info progress-bar-striped progress-bar-animated"
style = "width:90%"></div>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin =" anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -
Resultado
Várias barras de progresso
Você pode até empilhar várias barras de progresso. Coloque as várias barras de progresso na mesma classe .progress para empilhá-las, como visto no exemplo a seguir -
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Multiple Progress Bars</h2>
<div class = "progress">
<div class = "progress-bar bg-success" role = "progressbar"
style = "width: 40%" aria-valuenow = "20" aria-valuemin = "0"
aria-valuemax = "100"></div>
<div class = "progress-bar bg-warning" role = "progressbar"
style = "width: 20%" aria-valuenow = "35" aria-valuemin = "0"
aria-valuemax = "100"></div>
<div class = "progress-bar bg-info" role = "progressbar"
style = "width: 15%" aria-valuenow = "45" aria-valuemin = "0"
aria-valuemax = "100"></div>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -