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..

[BaSingSe]

Con esto he conseguido el precargador, lo vi en un video el problema viene ahora asi..

Este es el codigo con el que hice el cargador, que por cierto solo me carga una imagen a la vez :( y en el formulario envio varias..

Código Javascript:

//Create REPORT
    $('#reporte').submit(function(e){
 
        e.preventDefault(); 
        $form = $('#reporte');
        
        $form.find('.progress-bar').removeClass('progress-bar-success').removeClass('progress-bar-danger');
 
            var formdata = new FormData($form[0]); //formelement
            var request = new XMLHttpRequest();
 
            //progress event...
            request.upload.addEventListener('progress',function(e){
                var percent = Math.round(e.loaded/e.total * 100);
                $form.find('.progress-bar').width(percent+'%').html(percent+'%');
            });
 
            //progress completed load event
            request.addEventListener('load',function(e){
                $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
            });
 
            request.open('post', '../model/report_model.php?form=create"');
            request.send(formdata);
 
            $form.on('click','.cancel',function(){
                request.abort();
 
                $form.find('.progress-bar')
                    .addClass('progress-bar-danger')
                    .removeClass('progress-bar-success')
                    .html('upload aborted...');
            });
 
    })//--create REPORT
 

Estuve viendo un poco de como adaptarlo para usar la funcion succes que seria algo como esto, porque no me quedo muy claro

Código Javascript:

$('#reporte').submit(function(e){
 
        e.preventDefault(); 
        $form = $('#reporte');
        
        $form.find('.progress-bar').removeClass('progress-bar-success').removeClass('progress-bar-danger');
 
        
        $.ajax({
            xhr: function(){
                //var xhr = new window.XMLHttpRequest();
                var request = new XMLHttpRequest();
                //progress event...
                request.upload.addEventListener('progress',function(e){
                    var percent = Math.round(e.loaded/e.total * 100);
                    $form.find('.progress-bar').width(percent+'%').html(percent+'%');
                });
                //progress completed load event
                request.addEventListener('load',function(e){
                    $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
                });
 
                request.open('post', '../model/report_model.php?form=create"');
                request.send(formdata);
 
               return xhr;
            },
            success:function(){
                $('.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
 

Pero entonces no me funciona no lanza error no nada..