How to create a loading state in the middle of two Login steps

Hello, I would like to know the following:

I'm making a Login screen, where it is divided into two steps. The first user types the email, and in the second step, the user types his password and proceeds further. But I want an intermediate step in this process, where I put a load spinner, for the user to see if everything is ok with the Login, or not. Here is the HTML code:

<form class="form-horizontal msform" action="#" method="POST" id="myform">
<!-- INICIO PRIMEIRA ETAPA -->
<fieldset id="account_information" class="">
        <div class="form-group">
            <input type="email" class="form-control form-login input-login-email" id="" name="email" placeholder="Digite seu Email">
        </div>
        <small class="small-login-email">Ao acessar, concordo com os <a  href="#" target="_blank">Termos de Uso</a>.</small>
        <p><a class="btn btn-success btn-1 btnlogin col-md-offset-10 col-sm-offset-10 a-login-email next">Próximo</a></p>
</fieldset>
<!-- FIM PRIMEIRA ETAPA -->
<!-- CARREGAMENTO AO MEIO -->
<fieldset id="loading_information">
    <div style="text-align: center;position: relative;top: 105px;">
        <div class="sk-spinner sk-spinner-wave">
            <div class="sk-rect1" style="background-color: #1212b1"></div>
            <div class="sk-rect2" style="background-color: #1212b1"></div>
            <div class="sk-rect3" style="background-color: #1212b1"></div>
            <div class="sk-rect4" style="background-color: #1212b1"></div>
            <div class="sk-rect5" style="background-color: #1212b1"></div>
        </div>
    </div>
    <p><a class="btn btn-success btn-1 btnlogin col-md-offset-10 col-sm-offset-10 a-login-email next">Próximo</a></p>
</fieldset>
<!-- FIM CARREGAMENTO AO MEIO -->
<!-- INICIO SEGUNDA ETAPA -->
<fieldset id="company_information" class="animated fadeInDown">
    <div class="form-group">
        <input type="password" class="form-control form-login input-login-pass" id="company" name="company" placeholder="Digite sua Senha">
    </div>
    <small class="small-login-pass">&nbsp;<a href="#" target="_blank">Esqueci minha senha</a>
    <p><input style="" class="btn btn-success btn-1 col-md-offset-10 col-sm-offset-10 submit-login-pass" type="submit" value="Acessar"></p>
</fieldset>
<!-- FIM SEGUNDA ETAPA -->

Comment: Ignore the nomenclature of Id's rsrsrs.

Login validation function:

$(document).ready(function(){

        // Custom method to validate username
        $.validator.addMethod("usernameRegex", function(value, element) {
            return this.optional(element) || /^[a-zA-Z0-9]*$/i.test(value);
        }, "Usuário pode conter apenas letras ou números.");

        $(".next").click(function(){
            var form = $("#myform");
            form.validate({
                errorElement: 'span',
                errorClass: 'help-block',
                highlight: function(element, errorClass, validClass) {
                    $(element).closest('.form-group').addClass("has-error");
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).closest('.form-group').removeClass("has-error");
                },
                rules: {
                    username: {
                        required: true,
                        usernameRegex: true,
                        minlength: 6,
                    },
                    password : {
                        required: true,
                    },
                    conf_password : {
                        required: true,
                        equalTo: '#pwd',
                    },
                    company:{
                        required: true,
                    },
                    url:{
                        required: true,
                    },
                    name: {
                        required: true,
                        minlength: 3,
                    },
                    email: {
                        required: true,
                        minlength: 3,
                    },

                },
                messages: {
                    username: {
                        required: "",
                    },
                    password : {
                        required: "",
                    },
                    conf_password : {
                        required: "",
                        equalTo: "",
                    },
                    name: {
                        required: "",
                    },
                    email: {
                        required: "",
                    },
                }
            });
            if (form.valid() === true){
                if ($('#account_information').is(":visible")){
                    current_fs = $('#account_information');
                    next_fs = $('#company_information');
                }
                else if($('#company_information').is(":visible")){
                    current_fs = $('#company_information');
                    next_fs = $('#personal_information');
                }

                next_fs.show(); 
                current_fs.hide();
            }
        });

        $('#previous').click(function(){
            if($('#company_information').is(":visible")){
                current_fs = $('#company_information');
                next_fs = $('#account_information');
            }
            else if ($('#personal_information').is(":visible")){
                current_fs = $('#personal_information');
                next_fs = $('#company_information');
            }
            next_fs.show(); 
            current_fs.hide();
        });

    });

Now, when I click the Next button, it will go through the intermediate level, stay a few seconds, and then the step of entering the password will appear.

How could I do this?

Note: I'm using jquery, jquery-validate, and bootstrap.