Adding CSS loader to HTML button click

I’m trying to add a “loader” while my flask application runs a task.

Here is my HTML for for my button

{% 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 %}

Here is the CSS that I’ve added:

#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); }
}

Any ideas on how to call this correctly?

Answer

Make it visible from the start, without ever showing it with javascript. Then hide it with js like so:

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

EDIT: I now realize you said on button click in the title. I am assuming you want to hide the loading screen on button click? If not correct me in a comment. Otherwise, use this code:

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

P.S.

Your script should be at the bottom of the body, and your CSS and JS (and my code) reference #loader, when the body has <div id="loading">