En este artículo, crearemos una barra de progreso de varios pasos usando Bootstrap. Además de Bootstrap, usaremos jQuery para la manipulación de DOM.
Las barras de progreso se utilizan para visualizar la cantidad de trabajo que se ha completado. La fuerza de la barra de progreso indica el progreso del trabajo. Generalmente se usa en aplicaciones web en línea como YouTube, GitHub, etc., para mostrar cómo se carga la página hasta el momento. También puede encontrar una barra de progreso mientras descarga o carga el contenido en una aplicación web.
La barra de progreso de varios pasos se utiliza para mostrar el progreso del trabajo en un formato de pasos .
Por ejemplo:
Step1 -> Step2 -> Step3 -> Final
Cada paso tiene una barra de progreso que muestra su progreso para llegar al siguiente paso.
Ejemplo: para crear la barra de progreso de varios pasos, creemos 3 archivos index.html , styles.css , script.js .
índice.html:
HTML
<!DOCTYPE html> <html> <head> <link href= 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'> <script src= 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'> </script> <script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'> </script> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="row justify-content-center"> <div class="col-11 col-sm-9 col-md-7 col-lg-6 col-xl-5 text-center p-0 mt-3 mb-2"> <div class="px-0 pt-4 pb-0 mt-3 mb-3"> <form id="form"> <ul id="progressbar"> <li class="active" id="step1"> <strong>Step 1</strong> </li> <li id="step2"><strong>Step 2</strong></li> <li id="step3"><strong>Step 3</strong></li> <li id="step4"><strong>Step 4</strong></li> </ul> <div class="progress"> <div class="progress-bar"></div> </div> <br> <fieldset> <h2>Welcome To GFG Step 1</h2> <input type="button" name="next-step" class="next-step" value="Next Step" /> </fieldset> <fieldset> <h2>Welcome To GFG Step 2</h2> <input type="button" name="next-step" class="next-step" value="Next Step" /> <input type="button" name="previous-step" class="previous-step" value="Previous Step" /> </fieldset> <fieldset> <h2>Welcome To GFG Step 3</h2> <input type="button" name="next-step" class="next-step" value="Final Step" /> <input type="button" name="previous-step" class="previous-step" value="Previous Step" /> </fieldset> <fieldset> <div class="finish"> <h2 class="text text-center"> <strong>FINISHED</strong> </h2> </div> <input type="button" name="previous-step" class="previous-step" value="Previous Step" /> </fieldset> </form> </div> </div> </div> </div> </body> <script src="script.js"></script> </html>
estilos.css:
CSS
* {
margin: 0;
padding: 0
}
html {
height: 100%
}
h2{
color: #2F8D46;
}
#form {
text-align: center;
position: relative;
margin-top: 20px
}
#form fieldset {
background: white;
border: 0 none;
border-radius: 0.5rem;
box-sizing: border-box;
width: 100%;
margin: 0;
padding-bottom: 20px;
position: relative
}
.finish {
text-align: center
}
#form fieldset:not(:first-of-type) {
display: none
}
#form .previous-step, .next-step {
width: 100px;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 0px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px 10px 0px;
float: right
}
.form, .previous-step {
background: #616161;
}
.form, .next-step {
background: #2F8D46;
}
#form .previous-step:hover,
#form .previous-step:focus {
background-color: #000000
}
#form .next-step:hover,
#form .next-step:focus {
background-color: #2F8D46
}
.text {
color: #2F8D46;
font-weight: normal
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
color: lightgrey
}
#progressbar .active {
color: #2F8D46
}
#progressbar li {
list-style-type: none;
font-size: 15px;
width: 25%;
float: left;
position: relative;
font-weight: 400
}
#progressbar #step1:before {
content: "1"
}
#progressbar #step2:before {
content: "2"
}
#progressbar #step3:before {
content: "3"
}
#progressbar #step4:before {
content: "4"
}
#progressbar li:before {
width: 50px;
height: 50px;
line-height: 45px;
display: block;
font-size: 20px;
color: #ffffff;
background: lightgray;
border-radius: 50%;
margin: 0 auto 10px auto;
padding: 2px
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: lightgray;
position: absolute;
left: 0;
top: 25px;
z-index: -1
}
#progressbar li.active:before,
#progressbar li.active:after {
background: #2F8D46
}
.progress {
height: 20px
}
.progress-bar {
background-color: #2F8D46
}
guión.js
Javascript
$(document).ready(function () {
var currentGfgStep, nextGfgStep, previousGfgStep;
var opacity;
var current = 1;
var steps = $("fieldset").length;
setProgressBar(current);
$(".next-step").click(function () {
currentGfgStep = $(this).parent();
nextGfgStep = $(this).parent().next();
$("#progressbar li").eq($("fieldset")
.index(nextGfgStep)).addClass("active");
nextGfgStep.show();
currentGfgStep.animate({ opacity: 0 }, {
step: function (now) {
opacity = 1 - now;
currentGfgStep.css({
'display': 'none',
'position': 'relative'
});
nextGfgStep.css({ 'opacity': opacity });
},
duration: 500
});
setProgressBar(++current);
});
$(".previous-step").click(function () {
currentGfgStep = $(this).parent();
previousGfgStep = $(this).parent().prev();
$("#progressbar li").eq($("fieldset")
.index(currentGfgStep)).removeClass("active");
previousGfgStep.show();
currentGfgStep.animate({ opacity: 0 }, {
step: function (now) {
opacity = 1 - now;
currentGfgStep.css({
'display': 'none',
'position': 'relative'
});
previousGfgStep.css({ 'opacity': opacity });
},
duration: 500
});
setProgressBar(--current);
});
function setProgressBar(currentStep) {
var percent = parseFloat(100 / steps) * current;
percent = percent.toFixed();
$(".progress-bar")
.css("width", percent + "%")
}
$(".submit").click(function () {
return false;
})
});
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por saideepesh000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA