Olá amigos, acho que todos conhecem o famoso efeito "Ajax Loading" que simula o carregamento da página ao clicar em links...
Para quem tem uma internet mais lenta, o efeito é bacana afinal a página vai ficar carregando e o efeito irá aparecer para o usuário, porém para quem tem uma internet mais rápida, fica um efeito bem discreto, o cara clica no link aparece ali em cima mas em meio segundo ele ja é redirecionado a nova página e o efeito se perde..
Enfim, o que eu gostaria é que este efeito fosse mais "dinâmico", digamos assim. O "Ajax Loading" aparece ocasionalmente na tela do usuário de vez em quando, aparecesse quando a página estiver carregando e esse tipo de coisa que deixa o efeito mais bacana..
Tentei usar o setInterval, para conseguir um efeito aqui, mas não obtive muito sucesso xD
Agradeço a atenção desde já
Códigos que eu uso para obter o efeito
HTML
Para quem tem uma internet mais lenta, o efeito é bacana afinal a página vai ficar carregando e o efeito irá aparecer para o usuário, porém para quem tem uma internet mais rápida, fica um efeito bem discreto, o cara clica no link aparece ali em cima mas em meio segundo ele ja é redirecionado a nova página e o efeito se perde..
Enfim, o que eu gostaria é que este efeito fosse mais "dinâmico", digamos assim. O "Ajax Loading" aparece ocasionalmente na tela do usuário de vez em quando, aparecesse quando a página estiver carregando e esse tipo de coisa que deixa o efeito mais bacana..
Tentei usar o setInterval, para conseguir um efeito aqui, mas não obtive muito sucesso xD
Agradeço a atenção desde já
Códigos que eu uso para obter o efeito
HTML
- Código:
<div id="ajax_loading"><img src="http://i.imgur.com/XpwFi58.gif" alt="Carregando.."/></div>
- Código:
#ajax_loading {
background: #000;
color: #FFF;
text-align: center;
padding: 5px 0 8px;
width: 8%;
top: 0px;
left: 46%;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 0 0 5px 5px;
z-index: 999;
position: fixed;
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
opacity: 0.6;
display: none;
}
- Código:
jQuery(document).ready(function(){
jQuery("a").click(function(){
jQuery("#ajax_loading").slideDown();
setTimeout('load()',7000)
});
});
function load(){jQuery('#ajax_loading').slideUp()}
setTimeout('load()',7000);