[Solved] Progress bar animation when inputing form

by


I’m unsure of the issue because I cannot see a working example. Here is a working solution.

$("#progressbar").progressbar({
  value: 0
});
var $inputs = $(".form-group").children("input");
var totalInputs = $inputs.length;

  $inputs.on('keyup', function() {
    var pbVal = 0;
    $inputs.each(function(){
      if($(this).val().length > 0) pbVal ++;
    });

    $("#progressbar").progressbar("option", "value", (pbVal/totalInputs)*100)
  });
.container{
  width: 100%
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<form action="class/action.php" method="post">
  <div class="col-sm-3">
    <div class="form-group label-floating">
      <label class="control-label">1</label>
      <input id="input-1" type="text" class="form-control pgbar" name="name" required>
      <label class="control-label">2</label>
      <input id="input-2" type="text" class="form-control pgbar" name="name" required>
      <label class="control-label">3</label>
      <input id="input-3" type="text" class="form-control pgbar" name="name" required>
      <label class="control-label">4</label>
      <input id="input-4" type="text" class="form-control pgbar" name="name" required>
    </div>
  </div>
</form>

<!-- Progress bar -->
<div class="container">
  <div class="row">
    <div class="col-md-offset-6">
      <div class="progress progress-line-primary ">
        <div class="progress-bar" id="progressbar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> </div>
      </div>
    </div>
  </div>
</div>

14

solved Progress bar animation when inputing form