Javascript 在用户单击“下一步”时添加加载动画

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

页面流量细分

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

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

这里还有我正在使用的加载程序的工作示例

另外，为了补充完整性，我将引导与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>

{%extends'layout.html%}
{%block body%}
.加载器{
边框：16px实心#F3；/*浅灰色*/
边框顶部：16px实心#3498db；/*蓝色*/
边界半径：50%；
宽度：120px；
高度：120px；
动画：旋转2s线性无限；
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}
欢迎来到我的页面
图像：

{cur_releases%%中项目的%
{{item}}
{%endfor%}


TFTP目录路径：
请提供有效的TFTP路径。


TFTP服务器IP:
请提供有效的TFTP服务器IP。
下一个

您拥有的

.loader

样式将位于单个元素（微调器）上，而不是整个表单上

如果您希望它覆盖整个表单，请在其中添加一个容器，使表单

位置：相对和容器内部
位置：绝对。并且，首先隐藏它，因为您希望用户能够在提交表单之前填写表单。然后，使用JS来显示它

我会这样做：


var myForm=document.getElementById（'needs-validation'）；
myForm.addEventListener（'submit'，showLoader）；
函数显示加载程序（e）{
this.querySelector（'.loader container'）.style.display='block'；
//下面这行只是演示，它阻止表单提交
//这样你就可以看到它工作了，不要用它
e、 预防默认值（）；
}
#需要验证{
/*.装载机容器将相对于此进行定位*/
位置：相对位置；
}
.装载机集装箱{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（2407）；
/*先把它藏起来*/
显示：无；
}
.加载器{
边框：16px实心#F3；
/*浅灰色*/
边框顶部：16px实心#3498db；
/*蓝色的*/
边界半径：50%；
宽度：60px；
高度：60px；
动画：旋转1s线性无限；
/*添加以下内容以使其居中*/
位置：绝对位置；
最高：50%；
左：50%；
左边距：-38px；/*其宽度的一半（包括边框）*/
页边顶部：-38px；/*其高度的一半*/
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}
欢迎来到我的页面
/*不相关的样式*/body{font-family:Arial，Helvetica，sans-serif；}h1{font-size:1.5em；}
名字：

姓氏：

年龄：

下一个
非常感谢，这正是我想要做的。