How To Show Loading Spinner After Submitting Form Using Jquery

Posted By Bajarangi soft , Posted On 13-01-2021

how to display loader after submitting form using jquery

how-to-show-loader-after-submitting-form

Step 1:Create index.html and implement below html code in it.

<div class="wrapper">
    <header>
        <div class="container">
            <h1 class="text-center">Show page loading spinner while processing a form</h1>
        </div>
    </header>
    <div class="container">
        <form class="form horizontal">
            <div class="form-group">
                <label class="col-xs-4">Your Name:</label>
                <input type="text" id="name" name="name" class="form-control" />
            </div>
            <button class="btn btn-primary" type="submit">Submit</button>
        </form>
    </div>
</div>
<div id="loader"></div>

Step 2:Add script for submitting form with loader

<script>
    var spinner = $('#loader');
    $(function() {
        $('form').submit(function(e) {
            e.preventDefault();
            spinner.show();
            setTimeout(function() {
                spinner.hide();
            }, 2000); // <-- time in milliseconds
        });
    });
</script>

Complete Code For Submitting Form With Spinner Using JQuery.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Show page loading spinner while processing a form</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
        #loader {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,0.75) url(images/Loading_icon.gif) no-repeat center center;
            z-index: 10000;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <header>
        <div class="container">
            <h1 class="text-center">Show page loading spinner while processing a form</h1>
        </div>
    </header>
    <div class="container">
        <form class="form horizontal">
            <div class="form-group">
                <label class="col-xs-4">Your Name:</label>
                <input type="text" id="name" name="name" class="form-control" />
            </div>
            <button class="btn btn-primary" type="submit">Submit</button>
        </form>
    </div>
</div>
<div id="loader"></div>

<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    var spinner = $('#loader');
    $(function() {
        $('form').submit(function(e) {
            e.preventDefault();
            spinner.show();
            setTimeout(function() {
                spinner.hide();
            }, 2000); // <-- time in milliseconds
        });
    });
</script>
</body>
</html>