JQuery loading animation not showing

I am attempting to follow the answer here to create a loading animation using jQuery: https://stackoverflow.com/a/1964871/23334971

Unfortunately, no loading animation shows for me and I'm not sure why.

I am using Python/django for my server-side script.

I'm not sure how to produce a minimal working example because the server side code takes a good few seconds to run. Maybe just replace it with a delay? I'm a complete noob so there's probably something obvious wrong with my code:

This is my HTML:

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="{% static 'calculator/script.js' %}"></script>
        <link rel="stylesheet" href="{% static 'stylesheet.css' %}">
    </head>
    <body>
        <article>
            <form id="calculatorForm">
                <label for="num1">Numbers</label>
                <input type="number" name="number1" id="number1">
                <input type="number" name="number2" id="number2"><br />
                <button type="submit" role="button">Calculate</button><br /><br />
            </form>
            <div class="modal"></div>
            <div id="result"></div>
        </article>
    </body>
</html>

stylesheet.css: (just copied and pasted from the linked stackoverflow answer)


.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url('https://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

script.js:

// this is the code i've copied and pasted from the SO answer
$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading"); },
    ajaxStop: function() { $body.removeClass("loading"); }    
});


// this is the code I'm using to connect to my back-end python code and return a result
$(document).ready(function() {
    $('#calculatorForm').on('submit', function(event) {
        event.preventDefault(); 
        $.ajax({
            url: '', 
            type: 'get', 
            data: {
                number1: $('#number1').val(),
                number2: $('#number2').val(),  
            },
            success: function(response) {
                $('#result').html('<b>Result: </b>' + response.result); 
            }
        });
    });
});

the code works. You may not see it because the process takes place in a very short time. You can use setTimeout() function to see.

I replaced my script with:

$(document).ready(function() {
    var $body = $("body");

    $('#calculatorForm').on('submit', function(event) {
        event.preventDefault();
        $body.addClass("loading");
            $.ajax({
                url: '', 
                type: 'get', 
                data: {
                    number1: $('#number1').val(),
                    number2: $('#number2').val(),  
                },
                success: function(response) {
                    $('#result').html('<b>Result: </b>' + response.result); 
                },
                error: function(xhr, status, error) {
                    $('#result').html('<b>Error: </b>' + error); 
                },
                complete: function() {
                    $body.removeClass("loading");
                }
            });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

I'm not sure why my original code doesn't work, but this does.

Credit: ChatGPT

With modern CSS using grid we can simplify the CSS and "super center" the icon on the body (set to full view height/width) during the load process and size the image to whatever we want; here I used 5em but that can be anything.

Probably don't even need the zindex since we hide the rest here so I commented that out - this could also be placed in a "main" container so you might have a page header/main/footer etc. also.

I also toggled the OFF again with the .always() Not ethe setTimeout exists here just to simulate a delay.

$(function() {
  $('#calculatorForm').on('submit', function(event) {
    event.preventDefault();
    $("body").addClass("loading");
    const data = {
      number1: $('#number1').val(),
      number2: $('#number2').val()
    };
    setTimeout(function() {
      $.ajax({
        url: '',
        type: 'get',
        data: data
      }).done(function(response) {
        $('#result').html('<b>Result: </b>' + response.result);
      }).always(function() {
        $("body").removeClass("loading");
      });
    }, 3000);
  });
});
body {
  height: 100vh;
  width: 100vw;
}

.modal {
  display: none;
  /*  z-index: 1000;*/
  height: 5em;
  width: 5em;
  background-image: url('https://i.stack.imgur.com/FhHRx.gif');
  background-repeat: no-repeat;
  background-size: 100%;
}

body.loading {
  overflow: hidden;
  display: grid;
  place-items: center;
}

body.loading article {
  display: none;
}

body.loading .modal {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<article>
  <form id="calculatorForm">
    <label for="number1">Numbers</label>
    <input type="number" name="number1" id="number1">
    <input type="number" name="number2" id="number2"><br />
    <button type="submit" role="button">Calculate</button><br /><br />
  </form>
  <div id="result"></div>
</article>
<div class="modal"></div>

Back to Top