Изменение ширины элемента на js в %

var stepp = 0; 
function stepByStepForm() { 
    var nextStepBtn = $('.next-btn'), 
            prevStepBtn = $('.prev-btn'), 
            step = $('.step'), 
            stepField = $('.step__field'); 
 
    nextStepBtn.on('click', function(e) { 
        stepp = stepp + 1; 
        var percent = parseInt(100/step.length); 
        console.log(percent); 
        var progressBarStep = stepp * percent; 
        e.preventDefault(); 
        if ($(this).parent().find(stepField).val().length <= 0) { 
            alert('Не заполнены поля') 
        } else { 
            $('.progress-bar').width(progressBarStep + '%'); 
            step.fadeOut(0); 
            $(this).parent().next(step).show(); 
        } 
    }); 
 
    prevStepBtn.on('click', function(e) { 
        stepp--; 
        var progressBarStep = stepp * 25; 
        $('.progress-bar').width(progressBarStep + '%'); 
        e.preventDefault(); 
        step.fadeOut(0); 
        $(this).parent().prev(step).show(); 
    }); 
} 
 
stepByStepForm();

.progress-bar{ 
  height: 20px; 
  width: 0%; 
  background: green; 
  transition: .5s width; 
} 
 
.step.first{ 
  display: block; 
} 
 
.step{ 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="form"> 
    <form action=""> 
 
        <div class="progress-bar"></div> 
 
        <div class="step first"> 
            <label> 
                <input type="text" placeholder="1" class="step__field"> 
            </label> 
 
            <a href="" class="next-btn">Далее</a> 
        </div> 
        <div class="step"> 
 
            <label> 
                <input type="text" placeholder="2" class="step__field"> 
            </label> 
 
            <a href="" class="prev-btn">Назад</a> 
            <a href="" class="next-btn">Далее</a> 
        </div> 
        <div class="step"> 
            <label> 
                <input type="text" placeholder="3" class="step__field"> 
            </label> 
            <a href="" class="prev-btn">Назад</a> 
            <a href="" class="next-btn">Далее</a> 
        </div> 
        <div class="step"> 
            <label> 
                <input type="text" placeholder="3" class="step__field"> 
            </label> 
            <a href="" class="prev-btn">Назад</a> 
            <a href="" class="next-btn">Далее</a> 
        </div> 
        <div class="step"> 
            end 
        </div> 
    </form> 
</div>