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