how to run loader on successful form submission only?

Question

I want that the loader should start ONLY and ONLY when the form has been successfully submitted (instead of just the onclick submit button event that the code does currently). How can I do so?

    <div id="loader" class= "lds-dual-ring hidden overlay" >
        <div class="lds-dual-ring hidden overlay"> </div>
       <div class="loadcontent"><div><strong>Working on your request...it may take up to 2 minutes.</strong></div></div>

    </div>

Code below is the part where loader kicks upon submit button event.

    $('#submitBtn').click(function () {


        $('#loader').removeClass('hidden')
        // $('#loader').html('Loading').addClass('loadcontent')

  


        // $("#loading").html("Loading");

    })
</script>

Code below is one of the form fields that takes a value from user:

        <div class="form-group">
            <div class="form-control"style="padding: 0;">
                
                    {% ifequal field.name 'Port' %} 

                    {% render_field field class="rowforinput marginforfields form-control" style="height: 23px; margin-left: 0; margin-right: 0" title=" For eg. 1/1/48 or 2/1/16" pattern="^[12]/1/(?:[1-3]\d|4[0-8]|[1-9])$" required=true %}

                {% endifequal %}           </div>
        </div>