Если грубо и просто, то берёте jQuey и для формы вешаете событие отмены отправки и делаете обмен с сервером через ajax.
У $.ajax в
beforeSend вы делаете действие для начала показа анимации, а при
complete вы эту анимацию убираете. В моём примере показывается изначально скрытый блок #ajax-loader внутри которого просто вставлена gif-анимация. Форму и блок делаете на свой вкус :)
$(document).on("submit", "#YouFormId", function(e){
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(), // отправляемые данные на сервер взятые из полей формы
beforeSend: function(){
$("#ajax-loader").fadeIn(300); // показываем блок с анимацией
},
complete: function(){
$("#ajax-loader").fadeOut(300); // скрываем блок с анимацией
},
error: function(result){
alert("Неизвестная ошибка при отправке. Попробуйте повторить позже.");
},
success: function(data) {
alert( "Пришли данный от сервера : " + data );
}
});
});
Или почитайте
тут.