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

Question

我正在寻找一种在PHP的以下情况下显示进度条的方法：

在search.php上单击
1. 搜索按钮
2. 在页面上显示进度条（显示百分比）（例如，位于中心的小弹出窗口）
3. 就在搜索结果显示在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>

Answer 1

将此内容添加到result.php

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

添加属性id您的提交按钮

<button class="btn btn-primary" id="submit" type="submit" >Search</button>

在您的javascipt文件中

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