Corri atrás de uma forma simples de mostrar uma mensagem de "Carregando..." quando o usuário clica em um link e aguarda o processamento das informações. Bom, depois de muito camelar pela internet colhi algumas informações e fiz um bem simples usando o atributo FIXED do CSS. Mãos a obra!!!

1º) Bom, primeiro adicionamos o script abaixo no head do layout default. No meu caso é o default.ctp.

//Mostra o carregador
function __loadMostra(){
  var objLoader = document.getElementById("carregador_pai");
  objLoader.style.display = "block";
  objLoader.style.visibility = "visible";
}

Este código "mostra" (atribui 'block' e 'visible' para ele) o elemento carregando.

2º) Adicione a DIV que contém a mensagem de carregando.

 
  
   
    Aguarde carregando ...
   
   
imagem de carregando
  
 

Observe que declarei que a DIV deve ficar escondida (display: none; visibility: hidden;).
Como eu uso o CakePHP eu adicionei uma imagem (aqui neste site tem várias imagens de Carregando para escolher):

echo image('carregando.gif', array('alt' => 'Carregando...', 'border' => 0));

3º)Adicione o seguinte CSS:

#carregador_pai{
  width: 100%;
  height:100%;
  position: absolute;
  text-align: center;
  background-color:#414141;
  filter:alpha(opacity=90);
  opacity:0.9;
  overflow: auto;
  top: 0;
  left: 0;
  z-index:2;
}

#carregador_fundo{
  font-size: 1px;
  left: 8px;
  width: 113px;
  position: relative;
  top: 50px;
  height: 7px;
  background-color: #ebebe4
}
#carregador_posicao{
  padding-top:20%;
}
#carregador{
  border-right: #6a6a6a 1px solid;
  padding: 0px 10px 0px 16px;
  border-top: #6a6a6a 1px solid;
  display: block;
  font-size: 11px;
  z-index: 2;
  margin: 0px auto;
  border-left: #6a6a6a 1px solid;
  width: 250px;
  height:70px;
  color: #000000;
  border-bottom: #6a6a6a 1px solid;
  font-family: Tahoma, Helvetica, sans;
  background-color: #ffffff;
  text-align: left;
}

@media screen{
  body>div#carregador_pai{
    position: fixed;
  }
}

Esse CSS cria uma tela como na imagem abaixo.


Ah! Esse CSS não funciona no IE¨6 ou inferior. Mas quem liga né? ;) Desde já estou fazendo minha parte no movimento ATUALIZE SEU IE! E outra coisa, o único problema que os usuários do Internet Explorer 6 ou inferior terão é que não verão a tela de Carregando, mas o carregamento da página não é afetado.

4º) Guenta aí, tá quase acabando ;). Agora sempre que você tiver um link basta adicionar a função

onclick = "__loadMostra();";

Ou seja, ao clicar ele mostra a DIV do Carregando... e assim que a próxima página termina de ser carregada a DIV volta a ser ocultada. Dá para adicionar ele nos formulário também, excluindo o botão de submit e criando um INPUT type BUTTON e adicionando o __loadMostra() seguido do submit().

onclick = "__loadMostra(); submit();";

Com o CakePHP fica assim

// Cria o botão de Enviar que submete o formulário
echo $form->button('Enviar', array('onclick' => '__loadMostra(); submit();'));
// Cria a tag /FORM
echo $form->end();

Simples não? Dúvidas? Eu gostei do resultado final. Se tiver algo errado comentem aí!

Ah! Na imagem parece que estou usando o IE8 né? Não... esse é o Firefox "camuflado" com o thema "ie8fox".

Abração!