How to load a Spinner into a Modal during Ajax (GET) - Asp.net requests

Question

I have a Page Index with a Grid that lists CEPS. I am using "Modals" windows to Edit, Delete and Create a new Record. When I click on the Edit button, there is a delay of about 3 seconds for the modal to appear, this is due to the search time of the record in the database... I would like to upload a "spinner" to my Index to block the screen while pressing and then disappear when the Edit modal appears. Currently, my Spinner is opening in a DIV, but it can be changed to a Modal... I accept suggestions... Someone would know how to help me?

A hug to all! :)

CSS of Spinner:

.loading {
    text-align: center;
}

    .loading span {
        display: inline-block;
        vertical-align: middle;
        width: 10px;
        height: 10px;
        margin: 50px auto;
        background: black;
        border-radius: 50px;
        -webkit-animation: loader 0.9s infinite alternate;
        -moz-animation: loader 0.9s infinite alternate;
    }

        .loading span:nth-of-type(2) {
            -webkit-animation-delay: 0.3s;
            -moz-animation-delay: 0.3s;
        }

        .loading span:nth-of-type(3) {
            -webkit-animation-delay: 0.6s;
            -moz-animation-delay: 0.6s;
        }

@-webkit-keyframes loader {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.9;
        -webkit-transform: translateY(0);
    }

    100% {
        width: 24px;
        height: 24px;
        opacity: 0.1;
        -webkit-transform: translateY(-21px);
    }
}

@-moz-keyframes loader {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.9;
        -moz-transform: translateY(0);
    }

    100% {
        width: 24px;
        height: 24px;
        opacity: 0.1;
        -moz-transform: translateY(-21px);
    }
}

DIV that will display Spinner in Index ()

<div class="loading">
    <span></span>
    <span></span>
    <span></span>
</div>

Edit button (Javascript button)

    $(document).ready(function () {
    $.ajaxSetup({ cache: false });

    $('table').on('click', 'a[data-modal]', function (e) {
        openmodal(this.href);
        return false;
    });

    function openmodal(url) {
        // Faz uma requisição get e carrega o formulário na janela modal
        $('#contentModal').load(url, function () {
            $('#modalGenerica').modal({
                keyboard: true
            }, 'show');

            // Inscreve o evento submit
            bindForm(this);
        });

    }

    function bindForm(dialog) {
        // Inscreve o formulário na janela modal com o evento submit
        $('form', dialog).submit(function (e, i) {
            if ($(this).valid() || i) {
                // Realiza una requisição ajax
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        // Se a requisição for satisfatória, recarrega a página atual
                        if (result.success) {
                            window.location = window.location;
                        } else {
                            $('#contentModal').html(result);
                            bindForm();
                        }
                    }
                });
                return false;
            } else {
                return false;
            }
        });
    }
});

Answer 1

Whoa, all right, all right?

If I understand correctly what you need, just change the function "openmodal":

function openmodal(url) {
    $(".loading").show();
    $.get(url).success(function(data){
        $('#contentModal').html(data);
        $('#modalGenerica').modal({
            keyboard: true
        }, 'show');

        // Inscreve o evento submit
        bindForm(this);

        $(".loading").hide();
    });
}

Is that right? If you have any questions you can give me a shout that I am available!