进度条取决于用户输入

我在一个div中有六个问题，当用户回答问题时，进度条会根据填写的输入量的百分比进行调整，并且在模糊上有值。现在我觉得我有一个逻辑问题。在我的代码中，180=进度条的容器宽度除以6个问题。我试图设置I，这样你就可以将i乘以180来制作进度条宽度的动画。如果第一个进度条的输入框被填充，0*180应该是0。我不希望宽度为0，我希望宽度为180，这就是为什么我放arrayAnswerd =i+1;，但当我从所有框中删除输入文本时，进度条不会下降到0宽度，因为我假设arrayAnswerd=1。

请帮我制作这个进度条。我必须调整i，这样当没有填充任何内容时，宽度为0。您在演示的开头看到了这一点，但如果我键入2个输入并擦除它们，宽度将保持在180。我相信i不会回到0

$(function(){
  var nFilledIN = 0;
  var ratio = 0;
  var questions = $(".part input")
  var nQuestion = questions.length;
  var started = false;
  var arrayAnswerd;
  questions.on("change", function(){
    questions.each(function(i){
      if($(this).val()){
        arrayAnswerd =i+1;
      }
    })
    console.log(arrayAnswerd)
    if(arrayAnswerd == 0){
      // ratio = 1/ nQuestion
      // arrayAnswerd = 1
    }
    else{
      // ratio = parseInt($(".progressQs").outerWidth()) / nQuestion 
    }
    ratio = parseInt($(".progressQs").outerWidth()) / nQuestion
    console.log(ratio)
    $(".progressBarQs").animate({
      width : "+" + arrayAnswerd * ratio
    })
    if($(this).val()){
      nFilledIN++
    }else if (nFilledIN > 0){
      nFilledIN--
    }
  })
})

background: #3EABC0;
}
.form{
  /*width:80%;*/
  width: 1080px;
  margin: 0 auto;
  height:500px;
  background: #ccc;
  overflow: hidden;
}
.slider{
  width: 300%;
}
.part{
  width: 33.33%;
  display: inline-block;
  background: #e1f2f5;
  height: 500px;	
  float: left;
}
.part2{
  background: blue;
}
.part3{
  background: orange;
}
.buttonWrapper{
  text-align: center;
}
.progressQs{
  width: 1080px;
  background: #bbb;
  margin: 0 auto;
  /*padding: 10px 0px;*/
  /*overflow: hidden;*/
  position: relative;
  background: lightgreen;
}
.progressBarQs{
  display: block;
  width: 0px;
  height: 20px;
  /*content: "";*/
  /*position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;*/
  background: limegreen;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-radius:0px 20px 20px 0px;
  /*overflow: hidden;*/
  position: relative;
}
.reportPrecentage{
  display: inline-block;
  position: absolute;
  right: 50%;
  top: -50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: red;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="progressQs">
  <span class="progressBarQs"><span class="reportPrecentage"></span></span>
</div>
<div class="form">
  <div class="slider">
    <div class="part part1">part1
      Name: <input type="text">
      Address: <input type="text">
      location: <input type="text">
      Gender: <input type="text">
      How Long: <input type="text">
      date: <input type="text">
    </div>
    <div class="part part2">part2</div>
    <div class="part part3">part3</div>
  </div>
</div>
<div class="buttonWrapper">
  <button id="left">Left</button>
  <button id="right">Right</button>
</div>