Progression bar

by borisjavier

HTML

<!DOCTYPE html>
<html>
  
<head>
    
  
    <!--<script src=
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
    </script>-->
    
    <script src=
'https://golden-notes.io/vendor/jquery/jquery.min.js'>
    </script>
  
</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">
                        <input type="hidden" name="materiais" id="materiais" value="[{&quot;planta&quot;:&quot;1&quot;,&quot;material&quot;:&quot;Borracha&quot;,&quot;peso&quot;:1504},{&quot;planta&quot;:&quot;1&quot;,&quot;material&quot;:&quot;PET&quot;,&quot;peso&quot;:979},{&quot;planta&quot;:&quot;1&quot;,&quot;material&quot;:&quot;Multicamada&quot;,&quot;peso&quot;:9011},{&quot;planta&quot;:&quot;1&quot;,&quot;material&quot;:&quot;HDPE&quot;,&quot;peso&quot;:10000},{&quot;planta&quot;:&quot;2&quot;,&quot;material&quot;:&quot;HDPE&quot;,&quot;peso&quot;:0},{&quot;planta&quot;:&quot;2&quot;,&quot;material&quot;:&quot;Borracha&quot;,&quot;peso&quot;:9745}]">
                            <li class="active" id="step1">
                                <strong class="progress-label">Carregamento</strong>
                            </li>
                            <li id="step2"><strong class="progress-label">Aquecimento</strong></li>
                            <li id="step3"><strong class="progress-label">Pirolise</strong></li>
                            <li id="step4"><strong class="progress-label">Resfriamento</strong></li>
                            <li id="step5"><strong class="progress-label">Descarregamento</strong></li>
                        </ul>
                        <div class="progress">
                            <div class="progress-bar"></div>
                       ...

CSS

* {
    margin: 0;
    padding: 0
}
  
html {
    height: 100%
}
  
h2{
    color: #00849d;
}
#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: #00849d;
}
  
#form .previous-step:hover,
#form .previous-step:focus {
    background-color: #000000
}
  
#form .next-step:hover,
#form .next-step:focus {
    background-color: #00849d
}
  
.text {
    color: #00849d;
    font-weight: normal
}
  
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey
}
  
#progressbar .active {
    color: #00849d;
}
  
#progressbar li {
    list-style-type: none;
    width: 20%;
    float: left;
    position: relative;
    font-weight: 400
}

/* Para pantallas pequeñas, muestra el texto con fuente más pequeña */
#progressbar li .progress-label {
    font-size: 12px; /* Tamaño de fuente para pantallas pequeñas */
}

/* Para pantallas medianas y más grandes, muestra el texto con fuente más grande */
@media (min-width: 768px) {
    #progressbar li .progress-label {
        font-size: 15px; /* Tamaño de fuente para pantallas medianas y grandes */
    }
}
  
#progressbar #step1:before {
    content: "1";
}
  
#progressbar #step2:before {
    content: "2"
}
  
#progressbar #step3:before {
    content: "3"
}
  
#progressbar #step4:before {
    content: "4"
}

#progressbar #step5:before {
    content: "5"
}
  
#progressbar...

JavaScript

$(document).ready(function () {
    var currentGfgStep, nextGfgStep, previousGfgStep;
    var opacity;
    var current = 1;
    var steps = $("fieldset").length;
  
    setProgressBar(1);
  
    $("#next-step1").click(function () {
        var confirmNext = confirm("Esta etapa do processo está concluída?");
        if (confirmNext) {
            currentGfgStep = $(this).parent();
            nextGfgStep = $(this).parent().next();
            var material = $("#material").val();
                    var peso = $("#peso").val();

                    if (material === "" || peso === "") {
                    alert("Impossível continuar. O peso e o tipo de material devem ser determinados. Conclua e continue.");
                    $("#material").focus();
                    return;
                    }

            $("#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);
        }
    });
    
        $("#next-step2").click(function () {
        var confirmNext = confirm("Esta etapa do processo está concluída?");
        if (confirmNext) {
            currentGfgStep = $(this).parent();
            nextGfgStep = $(this).parent().next();
            var material = $("#material").val();
                    var peso = $("#peso").val();

                    if (material === "" || peso === "") {
                    alert("Impossível continuar. O peso e o tipo de material devem ser determinados....