I have a web page where I do the verification of the user and then redirect it. I need to add a standby gif to the screen as soon as the user clicks the log in button. But the verification process takes some time until the result is returned from the service. How can I cache and view the gif?

here is my css

.message {
            margin: 0px; 
            padding: 0px;
            position: fixed;
            right: 0px;
            top: 0px;
            width: 100%; 
            height: 100%; 
            background-color: #666666; 
            z-index: 10000;
            opacity: .8; 
            filter: alpha(opacity=70);
            display:none;
            background: url("assets/images/waiting.gif") no-repeat center center;
        }

here is my html code

<form id="signinForm">
            <input id="email" type="text" placeholder="E-mail"/>
            <input id="password" type="password" placeholder="password"/>
            <input id="login" type="submit" value="Login"/>
        </form>
        
        <div id="divLoading" class="message">
            <p style="position: absolute; top: 30%; left: 45%; color: White;">
            </p>
        </div>  

here is my jquery code

<script> 
          $('#login').click(function (ev) {
                $("#divLoading").show();
                ev.preventDefault();                    
                setTimeout(()=>                    
                $.ajax((getUserInfoForSignIn())).then(r=>{
                    $("#divLoading").hide();
                }), 100);                                                   
               return false;
            });         
        </script>

My gif with the updated code comes up when I click the login button. The critical point here was that I called my user authentication function running on the web service inside my ajax call.