Loading formulario

[BaSingSe]

Tengo unas pequena duda en cuanto a crear barras de carga he buscado en youtube y en google y no doy o no entiendo bien como crear una barra de carga, tengo un formulario el cual le suben hasta 30 imagenes pero pasa que los usuarios al momento de enviar la informacion piensan que el formulario se ha frizado y le dan mas de una vez haciendo esto que se me cree mas de un reporte... Estuve usando la funcion "beforeSend" pero intento fallido me percate que no me sirve para eso... una vez vi que se hablo de un plugin de javascript para eso pero no recuerdo el nombre si alguien sabe de algun video para hacerlo se lo agreadecere en el alma les dejo mi codigo que envia la informacion por si les llega algun consejo.

Código Javascript:

//Create REPORT
    $('#reporte').submit(function(e){
 
        e.preventDefault(); 
        var formData = new FormData(document.getElementById("reporte"));
        formData.append("dato", "valor");
 
        $.ajax({
            url: "../model/report_model.php?form=create",
            type: "post",
            dataType: "json",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            beforeSend:function(){
                
            }
            success:function(data){
                console.log(data);
                $('.msg').html('');
                if (data.status == 0) {
                    $('.msg').html("<div class='alert alert-danger fade in'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><b><span id='message'></span></b></div>");
                    for (var i = 0; i < data.msg.length; i++) {
                        $('#message').append("- "+data.msg[i]+"<br>");
                    }
                }else if(data.status == 1){
                    $('.msg').html("<div class='alert alert-warning fade in'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><b><span id='message'></span></b></div>");
                    $('#message').append(data.msg);
                }else if(data.status == 2){
                    $('#reporte')[0].reset();
                    $('.msg').html("<div class='alert alert-success fade in'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><b><span id='message'></span></b></div>");
                    $('#message').append(data.msg);
                    $('body,html').animate({scrollTop : 200}, 500);
                     return false;
                }
            }
        })
 
    })//--create REPORT
 

Se les agradece..