javascript - 当用户单击我的表单上的下一步时添加加载动画

Question

我想弄清楚如何在加载页面时创建加载动画。我在网上找到了一些示例并尝试将它们包含到我的代码中，但我没有看到加载动画工作。下面是我的页面流的一个例子。

页面流明细

1. 用户将到达/image.html 此页面将有一个表单，我需要从用户那里收集一些数据。

2. 当用户单击下一步转到下一页/package.html 时，我希望在加载/package.html 页面时有一个页面加载器。

这也是我正在使用的加载程序的工作示例 loader example

此外，为了完整起见，我正在使用 bootstrap 和 python flask。我没有添加 python 代码，因为我不确定它是否相关，但如果需要，我肯定可以添加它。

{%extends 'layout.html'%}


{%block body%}

<style type="text/css">

  .loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

</style>


<div class="jumbotron text-center">
    <h1>Welcome to my page</h1>
</div>

<!-- adding page loader-->
<div class="loader">
  <form class="container" id="needs-validation" novalidate name="HwQueryForm" action="{{ url_for('packages') }}" method="POST">
    <div style="padding-left: 1.0em" class="row">

          <label  for="select" class="control-label">Image:</label><br>
        <select id="Image" class="form-control" name="image" style="width: 82%" >
            {% for item in cur_releases %}
                <option value="{{item}}">{{item}}</option>
            {% endfor %}
        </select>
      </div>
      <br> 
      <div class="row">
          <div class="col-md-10 mb-3">
            <label for="validationCustom03">TFTP Directory Path:</label>
            <input type="text" class="form-control" id="validationCustom01" placeholder="TFTP Path" name="tftp_dir" required>
            <div class="invalid-feedback">
              Please provide a valid TFTP Path.
            </div>
            <br>
          </div>
      </div>
      <div class="row">
          <div class="col-md-3 mb-3">
            <label for="validationCustom04">TFTP Server IP:</label>
            <input type="text" class="form-control" id="validationCustom02" placeholder="TFTP Server IP" name="tftp_server_ip" required>
            <div class="invalid-feedback">
              Please provide a valid TFTP Server IP.
            </div>
          </div>
      </div>

    <button class="btn btn-info" type="submit">Next</button>
  </form>
</div>

Answer 1

您拥有的 .loader 样式旨在用于单个元素(微调器)，而不是整个表单。

如果你想让它覆盖你的整个表单，在里面添加一个容器，让你的表单position: relative; 和container 在里面position: absolute;。并且，首先隐藏它，因为您希望用户能够在提交之前填写您的表单。然后用JS显示出来。

下面是我的做法:

var myForm = document.getElementById('needs-validation');

myForm.addEventListener('submit', showLoader);

function showLoader(e){
  this.querySelector('.loader-container').style.display = 'block';
  // the line below is just for the demo, it stops the form from submitting
  // so that you can see it works. Don't use it
  e.preventDefault();
}

#needs-validation {
  /* .loader-container will be positionned relative to this */
  position: relative;
}

.loader-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(240,240,240,.7);
  /* hide it at first */
  display: none;
}

.loader {
  border: 16px solid #f3f3f3;
  /* Light grey */
  border-top: 16px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  /* Add the following to center it */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -38px; /* half its width (border included) */
  margin-top: -38px; /* half its height */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<h1>Welcome to my page</h1>
                                                                                             <style>/* unrelated styles */body{font-family:Arial,Helvetica, sans-serif;}h1{font-size:1.5em;}</style>
<form id="needs-validation">
    <p>First name: <input type="text"></p>
    <p>Last name: <input type="text"></p>
    <p>Age: <input type="text"></p>
    <button type="submit">Next</button>
    <!-- insert your loader container here, inside the <form> element -->
    <div class="loader-container">
      <div class="loader"></div>
    </div>
</form>