将CSS加载程序添加到HTML按钮中单击

Question

当我的烧瓶应用程序运行一个任务时，我试图添加一个“加载程序”。

这是我的HTML按钮

{% extends "base.html" %}
{% block head %}
{# <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/leaf.css') }}"> #}
{% endblock %}
{% block content %}
<div id="loader"></div>
<div id="vo_budget_file_settings">
    {# <a href="/generatecleanbudgetfile" class="btn btn-primary">Upload Final CRO Budget File</a> #}
    <p>Please upload the final CRO budget File</p>
    <form class="" action="/generatecleanbudgetfile" method=POST enctype=multipart/form-data>
        <input type="file" name="data_file" accept=".xls, .xlsx, .xlsm"/>
        <input type="submit" value="Begin Format" onclick="loading();"/>
    </form>
</div>
<script type="text/javascript">
    function loading(){
      $("#loader").show();     
    }
    </script>
{% endblock %}

下面是我添加的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); }
}

对如何正确称呼这件事有什么想法吗？

Answer 1

让它从一开始就可见，从来没有用javascript显示它。然后用js隐藏它，如下所示：

$(document).ready(() => {
    $("#loader").hide();
})

编辑:我现在知道你说的按钮点击标题。我假设你想隐藏加载屏幕上的按钮点击？如果没有在评论中纠正我。否则，使用以下代码：

$("#button").click(() => {
    $("#loader").hide();
})

附注：

当主体有#loader时，脚本应该位于正文的底部，CSS和JS (和我的代码)引用<div id="loading">。