How to add the loader spinner into my custom .js? - ajax

Question

I used the solution provided in this post: Check for existing email in WooCommerce checkout using Ajax
and it's working great.
The only thing that I need is that the ajax uses a spinner loading to indicates to the user that the system is loading an information.

Answer 1

I am taking an example of your provided reference link. If you use the same line of code then, you have to change the below line of code. Otherwise, please provide your line of code.
In below example first give loadingImage to image that you want to load while processing.
FROM
$.post( validateEmail.ajaxurl, { action:'validate_email', billing_email:input_value }, function(data) {
$('.message').html(data);
});
TO
$('#loadingImage').show(); // show the loading image.
var data = {
'action': 'validate_email',
'billing_email' : input_value
};
$.ajax({
url: validateEmail.ajaxurl,
type: "POST",
cache: false,
data: data,
success : function(html){
$('.message').html(data);
$('#loadingImage').hide(); // hide the loading image
}
});

Answer 2

Here I have added answer to how to set loading image in ajax call. If you want to set loader in outside the input then you have to make below changes
CSS
#loadingImage {
display:none;
}
HTML
Here I'm using some dummy GIF for an example. You can set that any gif and apply css you want.
<p class="form-row form-row form-row form-row-first validate-required woocommerce-validated" id="billing_email_field">
<label for="billing_email" class="">Email <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text " name="billing_email" id="billing_email" placeholder="Email" value="abc#gmail.com">
<img src="https://lh6.ggpht.com/_S0f-AWxKVdM/Sc4G-1MAUtI/AAAAAAAAHg8/SoQCgQ6-aSY/1%5B3%5D.gif?imgmax=800" id="loadingImage">
</p>
<span class="message"></span>
Script
$('#loadingImage').show(); // show the loading image.
var data = {
'action': 'validate_email',
'billing_email' : input_value
};
$.ajax({
url: validateEmail.ajaxurl,
type: "POST",
cache: false,
data: data,
success : function(html){
$('.message').html(data);
$('#loadingImage').hide(); // hide the loading image
}
});