Olá, gostaria de saber o seguinte:

Estou fazendo uma tela de Login, onde a mesma é dividida em duas etapas. A primeira o usuário digita o Email, e na segunda etapa, o usuário digita sua senha e prossegue adiante. Mas eu quero uma etapa intermediária neste processo, onde eu coloco um spinner de carregamento, para o usuário visualizar se está tudo certo com o Login, ou não. Segue o código HTML:

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

Comentário: Ignorem a nomenclatura dos Id’s rsrsrs.

Função de validação do Login:

$  (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();         });      }); 

Agora, eu quero que quando eu clicar no botão Próximo, ele avance pelo nível intermediário, fique alguns segundos e depois apareça a etapa de digitar a senha.

Como eu poderia fazer isto?

Nota: Estou utilizando jquery, jquery-validate e bootstrap.