單擊搜索提交按鈕時顯示進度條，直到加載搜索結果

Question

我正在尋找一種在 PHP 中的以下場景中顯示進度條的方法：

1. 在 search.php 單擊搜索按鈕
2. 在頁面上顯示一個進度條（顯示百分比）（例如中間的一個小彈出窗口）
3. 就在搜索結果顯示在 result.php 之前，停止並隱藏進度條

目前，JQuery 和 Bootstrap 可用，但可以添加其他。 我喜歡簡單。 你有什么好主意嗎？ 干杯!

搜索.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>

結果.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();
})