How to implement loader during form submit via AJAX?

Question

AJAX

Hello! Can you please tell me how to implement a spinner or loader while the form submission is being processed? There is now a jQuery script that hides the form and shows a thank you box on successful submission:

$('form').submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "mailer/smart.php",
        data: $(this).serialize()
    }).done(function() {
        $(this).find("input").val("");
        $('.callback, .fancybox-bg, .service-popup').fadeOut('fast');
        $('#thanks').fadeIn('slow');
        setTimeout(function() {
          $('#thanks').fadeOut('slow');
        },2000);
        $('form').trigger('reset');
    });
    return false;
});

Thank you!

Answer 1

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loader").show();
    },
    success: function(data) {
        $("#loader").hide();
    }
});