La barra de progreso de Bootstrap es un componente del marco de trabajo de arranque que se utiliza para mostrar el progreso de un proceso. Podemos personalizar la barra de progreso de arranque, el color, la forma y la animación según los requisitos. Bootstrap también proporciona varios tipos de barras de progreso.
Con la barra de progreso, los usuarios pueden conocer fácilmente el estado del trabajo realizado para un proceso en particular. Por ejemplo, si un usuario está descargando un archivo, la barra de progreso se puede usar para mostrar el progreso de la descarga en curso, lo mismo ocurre con la carga, etc.
Guía paso a paso para animar la barra de progreso
Paso 1: Incluya Bootstrap y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/ popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
Paso 2: agregue un HTML <div> con una clase de .progress y .progress-striped . También agregue class .active a .progress-striped . Dentro del <div> agregue un <div> vacío con una clase de .progress-bar y .progress-bar-success . Usando el atributo CSS, especifique el ancho de la barra de progreso.
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success"
style="width:0%">
</div>
</div>
Paso 3: agregue jQuery en la etiqueta <script> para animar la barra de progreso para mostrar el progreso.
$(".progress-bar").animate({
width: "70%"
}, 2500);
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Progress Bar Animation Example</title>
<!--Include Latest compiled and minified CSS -->
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<br><br>
<!--Include bootstrap progress bar in div.
Also specify width as 0% using CSS -->
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success"
style="width: 0%">
</div>
</div>
<script>
// Set the width to animate the progress bar
// Along with time duration in milliseconds
$(".progress-bar").animate({
width: "70%",
}, 2500);
</script>
</body>
</html>
Producción:
