Вот пример:
$(document).ready(function() {
$("input").on("change", function() {
var size = $("input:checked").length;
var progress = size * 10 + "%";
$(".progress").css("width", progress);
});
});
.container {
width: 200px;
height: 30px;
border: 1px solid black;
}
.progress {
height: 100%;
width: 0;
background-color: red;
transition: 0.4s ease;
}
.block {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="progress"></div>
</div>
<form>
<div class="block">
<input id="one" name="one" type="checkbox"><label for="one">One</label></div>
<div class="block">
<input id="two" name="two" type="checkbox"><label for="two">Two</label>
</div>
<div class="block">
<input id="three" name="three" type="checkbox"><label for="three">Three</label>
</div>
<div class="block">
<input id="four" name="four" type="checkbox"><label for="four">Four</label>
</div>
<div class="block">
<input id="five" name="five" type="checkbox"><label for="five">Five</label>
</div>
<div class="block">
<input id="six" name="six" type="checkbox"><label for="six">Six</label>
</div>
<div class="block">
<input id="seven" name="seven" type="checkbox"><label for="seven">Seven</label>
</div>
<div class="block">
<input id="eight" name="eight" type="checkbox"><label for="eight">Eight</label>
</div>
<div class="block">
<input id="nine" name="nine" type="checkbox"><label for="nine">Nine</label>
</div>
<div class="block">
<input id="ten" name="ten" type="checkbox"><label for="ten">Ten</label>
</div>
</form>
Для вашего случая:
- замените каждый флажок одной из ваших форм
- заменитеjQuery вызывает "при отправке", а затем отправляет данные, используя Ajax
- в вашем php (где вы отправляете данные Ajax), вычисляет% вопросов, которые пользователь отправил
- в вашей успешной части Ajax: изменить ширину индикатора выполнения в соответствии с% данных
Достаточно ли ясно?Надеюсь, это поможет, но не может помочь вам больше, так как вы не предоставляете код!