Jquery 进度条在 PHP 脚本执行时显示 %

Question

我是 jquery 的新手。我有两个 PHP 脚本。第一个脚本使用表单接受用户输入，当点击提交按钮时，第二个脚本通过调用多个 API 来处理用户输入。

调用 API 并获得响应需要时间。所以我想用百分比显示进度条，直到脚本获取过程。所以用户知道该过程正在进行并等待页面加载。

谁能帮我解决这个问题。 提前致谢。

Answer 1

我认为这不是一个好主意。 Becoz jquery 正在减慢您的浏览器速度。

.progressbar{
width:100%;
height:4px;
background:blue;
}
.progressbar-loaded{
height:4px;
background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progressbar"><div class="progressbar-loaded"></div></div>

<!-- your php codes going -->

end of my first php code<br>

<script type="text/JavaScript">
  $('.progressbar-loaded').css({width:'25%'});
</script>

<!-- your php codes going -->

end of my second php code<br>

<script type="text/JavaScript">
  $('.progressbar-loaded').css({width:'50%'});
</script>

<!-- your php codes going -->

end of my third php code<br>

<script type="text/JavaScript">
  $('.progressbar-loaded').css({width:'75%'});
</script>

<!-- your php codes going -->

end of my fourth php code<br>

<script type="text/JavaScript">
  $('.progressbar-loaded').css({width:'100%'});
</script>

这是progressbars的主要流程

Answer 2

可以使用loader或者bootstrap进度条https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp