Suponiendo el fichero recibir_datos.php
que se encarga de insertar en base de datos.
Un formulario sencillo:
<div id="form-container">
<div class="loading-animation" style="display:none;">Animación aquí</div>
<form action="recibir_datos.php" method="post">
<input type="text" name="title">
<input type="submit" value="Enviar">
</form>
</div>
El formulario, por si, hará una petición post contra el script php. Mediante código javascript no intrusivo, interceptaremos el evento de envío del formulario para crear el efecto deseado, usando principalmente la librería jQuery.
javascript:
jQuery(document).ready(function($){
$('#form-container form').on('submit', function(e){
e.preventDefault(); // Importante! detenemos el evento de envío
// Ocultamos el formulario (opcional) y mostramos la animación
$('#form-container form').hide(); // Opcional
$('.loading-animation').show(); // Seleccionamos el elemento contenedor de la animación por el nombre de su clase.
// Realizamos una petición post mediante ajax serializando el formulario.
$.post(
$('#form-container form').attr('action'), // Enviamos contra la acción del formulario.
$('#form-container form').serializeArray(), // Serializamos como array el contenido del formulario.
function (data, status, xhr){
// Aquí se muestra el mensaje de insercción correcta, restablaces el formulario o rediriges al usuario. Se ejecutará siempre que la petición POST devuelva un código de estado 2XX.
}
);
});
});
Puedes echar un vistazo a jQuery.post y jQuery.serializeArray() para entender mejor como funciona. Te recomiendo también encarecidamente leer sobre selectores en jQuery, es vital para saber qué se hace en cada caso.
Hay otras muchas formas de hacer esto y todas correctas, pero la idea es básicamente esto.
Por último, es posible que el código contenga errores tipográficos o de sintaxis, que pueden ser fácilmente resueltos, te pido disculpas por ello, no puedo probarlo en este momento.