Javascript 单击搜索提交按钮直到加载搜索结果时显示进度条

我正在寻找一种在PHP的以下场景中显示进度条的方法：

在search.php中单击搜索按钮

在页面上显示一个进度条（显示百分比）（例如，在中间的一个小弹出窗口）

在result.php上显示搜索结果之前，停止并隐藏进度条

目前，JQuery和Bootstrap是可用的，但也可以添加其他功能。我喜欢简单。你有什么好主意吗？干杯

search.php

<form class="form_container validationForm" action="result.php" method="post">
<input type="text" class="form-control validationInput" name="search" placeholder="Type a search keyword"><br>
<button class="btn btn-primary" type="submit" >Search</button>
</form>

搜寻

result.php

<main>
  <div class="container">
    <div class="row">
      <div class="col-sm-2">
    <div class="col-sm-12">
          // Below is the query function
          <?php include('_partials/query_functions.php'); ?>
    </div>
  </div>
    </div>
  </div>
</main>

//下面是查询函数

将此添加到

result.php

<div class="spinner-border" id="loader" role="status">
  <span class="sr-only">Loading...</span>
</div>

在您的

javascipt

文件中

$("#loader").hide();
$("#submit").on('click', function(){
    $("#loader").show();
})

---

请为我们提供您的解决方案。请展示您的尝试。您面临的问题是什么。你要的是完整的代码对不起，不够具体。我明白，事实上，我试过几件事。但是我想问一个开放的问题，以便为好的想法和不同的实现敞开大门。我认为会有一个足够简单的解决办法。至少，我尝试了@Pycc34所描述的方法，但没有成功（我还在挣扎，所以如果有人能接受挑战那就太好了。”—）谢谢！但是，这是微调器，与进度条不同。无论如何，我试过了，但是微调器只出现在result.php（而不是search.php）。i、 e.加载结果页时。此外，它不会消失…我不知道出了什么问题。用progressBar替换微调器

$("#loader").hide();
$("#submit").on('click', function(){
    $("#loader").show();
})