0

I have a simple flask application that has a few text input fields and a single button to post the data, which then runs a script and prints the results back out to the page. The function that runs can take several minutes to complete. I have trying to figure out how to display some sort of loading gif or progress bar that displays until the function is done and ready to display back the data.

I have tried to follow this method https://stackoverflow.com/a/29146550/10909304 ,but I can never get the gif to display.

Here is what my template looks like. Any ideas on what I am doing wrong that causes the loading gif to not display?

<head>
 <script type="text/javascript">// <![CDATA[
    function loading(){
        $("#loading").show();
        $("#content").hide();       
    }
// ]]></script>
</head>

<html>
   

      
    <style>
    
    div#loading {
    width: 35px;
    height: 35px;
    display: none;
    background: url(/static/loadinggif.gif) no-repeat;
    cursor: wait;
    }
    </style>
    
    

    
<body>
    
    <div id="loading"></div>
    <div id="content">
        <h3>Type anything:</h3>
        <p>
            <form action = "/" method = "POST">
            </br>
            <input type="text" name="var1" id="name1" placeholder="Enter the name">
            <input type="text" name="var2" id="name2" placeholder="Enter the name2" >
        </br>
        </br>
            <input type="submit" value="Submit" onclick="loading();">

        </p>
    </div> 
            

</body>

</html>
PSwill2
  • 3
  • 1
  • You should pay more attention to your document structure. An HTML document always begins with a corresponding element filled with a header and body. Each start tag also has an end tag to close the area again. See [here](https://www.w3schools.com/html/html_intro.asp) for an explanation. – Detlef Feb 15 '22 at 16:38

0 Answers0