I'm trying to simply show a loading gif once the form is submitted. My code is not working correctly for the loading gif to show. You'll see my image for the gif is set to visibility: hidden.

<script src=js/jquery-1.11.1.min.js></script>



<div class= style=width: 480px; margin: 0 auto; margin-top: 20px; id=form_wrapper>

    <img src=img/loader.gif id=gif style=display: block; margin: 0 auto; width: 100px; visibility: hidden;>

    <div class=fade id=form>

        <form action=process_login.php method=POST name=simplelogin id=login_form><br />

            <label for=username>&nbsp; Username:</label>

            <input type=username name=username id=username size=30 required><br><br>

            <label for=password>&nbsp; Password:</label>

            <input type=password name=password id=password size=30 required><br><br>

            <input class=load_button type=submit name=submit id=submit value=Submit placeholder=Submit>

        </form>

    </div>

</div>

<div class=fifty></div>



<script type=text/javascript>

    $('.load_button').submit(function() {

        $('#gif').show(); 

        return true;

    });

</script>