Bootstrap 4 - Avanzamento
Descrizione
La barra di avanzamento mostra l'avanzamento di un processo con barre in pila, sfondi animati ed etichette di testo.
Barra di avanzamento di base
La barra di avanzamento di base può essere creata aggiungendo l'elemento <div> con una classe .progress e aggiungendo la classe .progress-bar all'interno del suo elemento figlio. Aggiungi un attributo di stile con la larghezza espressa come percentuale. Diciamo, ad esempio, style = "60%"; indica che la barra di avanzamento era al 60%.
Il seguente esempio lo dimostra:
Esempio
<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>Produrrà il seguente risultato:
Produzione
Altezza ed etichette della barra di avanzamento
È possibile modificare l'altezza della barra di avanzamento impostando il valore per la proprietà height . Posiziona il testo all'interno della classe .progress-bar per aggiungere l'etichetta per la barra di avanzamento. Il seguente esempio lo dimostra:
Esempio
<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>Produrrà il seguente risultato:
Produzione
Barre di avanzamento colorate
Il colore delle barre di avanzamento può essere modificato utilizzando classi contestuali come bg-success , bg-info , bg-warning e bg-danger come mostrato nell'esempio seguente:
Esempio
<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>Produrrà il seguente risultato:
Produzione
Barre di avanzamento a strisce
Puoi aggiungere strisce alle barre di avanzamento aggiungendo la classe .progress-bar-striped nell'elemento <div> con una classe .progress-bar .
Esempio
<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>Produrrà il seguente risultato:
Produzione
Barre di avanzamento animate
Puoi aggiungere animazioni alle barre di avanzamento aggiungendo la classe .progress-bar-animated nell'elemento <div> con una classe .progress-bar .
Esempio
<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>Produrrà il seguente risultato:
Produzione
Molteplici barre di avanzamento
Puoi anche impilare più barre di avanzamento. Posiziona più barre di avanzamento nella stessa classe .progress per impilarle come mostrato nell'esempio seguente:
Esempio
<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>Produrrà il seguente risultato: