Add jquery "loading" effect

Question

I would like to add a loading effect when the person submits the form, and after about 2 seconds, the upload ends and the form displays the result (error or not) I would like to know how to deploy this system within this:

<script type="text/javascript"> // Script
    jQuery(document).ready(function(){
        jQuery('#ajax_form').submit(function(){
            var dados = jQuery( this ).serialize();

            jQuery.ajax({
                type: "POST",
                url: "salvaregistro.php",
                data: dados,
                success: function( data )
                {
                    $('#resultado').html(data).fadeIn("slow");
                }
            });

            return false;
        });
    });
</script>

In case the #resultado is the result of the form, if it will pass or if it will fail. It would have as BEFORE that it display this result show a div hidden that has an image of loading and hide her after a certain period of time?

Answer 1

You can use the plugin Blockui for this.

jQuery(document).ready(function(){
    jQuery('#ajax_form').submit(function(){
        var dados = jQuery( this ).serialize();

        $.blockUI(); //Bloquear UI
        jQuery.ajax({
            type: "POST",
            url: "salvaregistro.php",
            data: dados,
            success: function( data )
            {
                $.unblockUI(); //Desbloquear UI
                $('#resultado').html(data).fadeIn("slow");
            }
        });     
        return false;
    });
});

JSFIDDLE (Using Timeout to simulate the post)

Answer 2

One of the solutions is using the Sonic.js;

Documentation and examples: https://github.com/padolsey/sonic.js/blob/master/README.md

How to use?

You can create a javascript function this way and add it to the file . js you prefer (remember to carry along with the file Sonic.js):

var spinnerLoading;
function getAjaxLoading() {
    if (typeof spinnerLoading === 'undefined') {
        spinnerLoading = new Sonic({
            width: 100,
            height: 100,
            stepsPerFrame: 1,
            trailLength: 1,
            pointDistance: .02,
            fps: 30,
            fillColor: '#05E2FF',
            step: function(point, index) {
                this._.beginPath();
                this._.moveTo(point.x, point.y);
                this._.arc(point.x, point.y, index * 7, 0, Math.PI*2, false);
                this._.closePath();
                this._.fill();
            },
            path: [
                ['arc', 50, 50, 30, 0, 360]
            ]
        });
    }
    spinnerLoading.play();
    return spinnerLoading.canvas;
}

Calling the spinner:

$('#resultado').html(getAjaxLoading());

You can create different spinners, just depends on your creativity.

So completing your code could get + or - like this (do not forget to deal with errors that can return from ajax, otherwise the spinner will be there running endlessly).

In this case the code is all together, but you can declare getAjaxLoading in a file. js that is loaded everywhere, you choose the best implementation form for your case...:

<script type="text/javascript">
    jQuery(document).ready(function() {
        var spinnerLoading;

        function getAjaxLoading() {
            if (typeof spinnerLoading === 'undefined') {
                spinnerLoading = new Sonic({
                    width: 100,
                    height: 100,
                    stepsPerFrame: 1,
                    trailLength: 1,
                    pointDistance: .02,
                    fps: 30,
                    fillColor: '#05E2FF',
                    step: function(point, index) {
                        this._.beginPath();
                        this._.moveTo(point.x, point.y);
                        this._.arc(point.x, point.y, index * 7, 0, Math.PI * 2, false);
                        this._.closePath();
                        this._.fill();
                    },
                    path: [
                        ['arc', 50, 50, 30, 0, 360]
                    ]
                });
            }
            spinnerLoading.play();
            return spinnerLoading.canvas;
        }

        jQuery('#ajax_form').submit(function(e) {

            e.preventDefault(); //Evitamos o comportamento padrão que é o submit do formulário

            var dados = jQuery(this).serialize();

            //Adicionando o LOADING
            $('#resultado').html(getAjaxLoading());


            $.ajax({
                type: "POST",
                url: "salvaregistro.php",
                dataType: "JSON",
                data: dados
            }).done(function(data) {
                $('#resultado').html(data).fadeIn("slow");
            });
        });
    });
</script>

Answer 3

One solution is you create a div containing the image or message by loading and leaving it with visibility:hidden or display:none. In that link ^{Stackoverflow-en} there is an explanation about the two properties.

Taking advantage that you are using Jquery, in documentation of function $.ajax there are some settings you can use to show this div only while the form is sent. They are: beforeSend and complete.

beforeSend will be called before the request is made, so you can use it to display the div of "carrying".

complete will be executed when the request ends, regardless of whether it is successful or error. Then you can use it to make the div of "loading" hidden again.

Example:

$(function(){
    
    var loading = $('.loading');
    
    // Supondo que seja o evento de submit
    $('#send').on('click', function(){
        
        $.ajax({
            url: '/',
            data: {stack:'overflow'},
            beforeSend: function(){
                loading.css('visibility', 'visible'); // exibe o div
            },
            complete: function(){
                loading.css('visibility', 'hidden'); // esconde o div
            }
        });
    });
});

/**
  O CSS não tem relevância, foi somente para tornar o
  exemplo mais "apresentável"
*/

body{ text-align: center }

#send, .loading {
    margin: 10px auto;
    width: 40%;
}

.loading > img {
    max-width: 100px
}

.loading {
    visibility: hidden
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id='send'>Enviar</button>
<div class='loading'>
    <img src='http://i.stack.imgur.com/fLkAW.gif' alt=''/>
</div>

^{If you have a medium/high speed internet, you probably won’t even see the image being displayed in this example I did. If possible, test the environment to simulate a real situation.}