Mostrar un "progress bar" al usar $.ajax

Hola amigos.
Verán, en mi pagina, hago un $.ajax({});, para mandar unos valores y guardarlos sin refrescar nada.

Lo que quiero lograr y no he podido es, poner un progress bar.

Ya se hacer lo de poner alguna imagen GIF o un letrero que diga "cargando".
PERO AHORA... lo que quiero es lograr mostrar el porcentaje de la ejecucion esa peticion ajax.

ejemplo.

Envio un nuevo registro con ajax.
NOMBRE, EDAD, CORREO, CONTRASEÑA

$.ajax({
type:'POST',
dataType:'json',
url:'ajax.php',
data:{},
beforeSend: function() {
// AQUI MOESTRABA EL GIF DE LOADING
},
success: function(e) {
alert("se insertaron los datos con exito");
}
});

pero en vez de mostrar el gif quiero mostrar el porcentaje, Nose si me explico.
Existe una manera natural con jquery o necesito plugins externos?

GRACIAS.

Puedes utilizar el componente de Bootstrap : Progress bars Components · Bootstrap
Se trata de una capa que con sólo modificar el atributo width te dibuja la barra de progreso en el porcentaje que indiques, lo mejor es que es totalmente responsive. Hay varios diseños, colores e incluso animada. Claro, esto solo la dibuja, requerirías otra función para ir modificando el porcentaje.

La solución qué te propone ingcrisramirez es una buena solución.

Otro cantar es la función que comprueba el porcentaje a cada rato y lo refleja en la progress-bar. Porque el problema, es que no tienes una forma fácil de saber cuánto te falta para que se complete esa petición AJAX. En el beforeSend estás al 0% y en el sucess ya estás al 100%. Así que tienes que usar el controlar del evento onprogress del objeto XMLHttpRequest para tal fin. en jQuery sería similar. Aquí te lo explican muy bien. javascript - JQuery ajax progress via xhr - Stack Overflow

Un saludo