Show loading icon on click submit button in jQuery

Updated at 05-Jan-2022, By samar

Show loading icon on click submit button in jQuery

In this tutorial, we will try to find the solution to "Show loading icon on click submit button in jQuery" through programming.

You can show loading icon on click submit button of HTML form using jQuery. The submit() method triggers the submit event and it shows the loading icon when the submit event occurs.
  • Show loading icon on submit form using jQuery

    <!--  script -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
    crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
            $('#login_form').submit(function() {
                $('#loaderIcon').css('visibility', 'visible');
                $('#loaderIcon').show();
            });
        })
    </script>
    
    <!-- HTML -->
    <img id="loaderIcon" style="visibility:hidden; display:none" 
    src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" alt="..."/>
    <form id="login_form">
        
        <input type="submit" value="submit" />
    </form>
    

    This code snippet will help you to show the loading icon when you click submit button to submit the HTML form. Here we use jQuery which helps you to add submit event on HTML form after click submit button. 

Back to code snippet queries related jquery