Criando um preloader simples com Jquery

  • Post author:
  • Post category:Codeclick

A biblioteca Jquery é de fato algo de mais incrível que aconteceu na vida de desenvolvedores e profissionais de front-end. A forma simples e descomplicada de criar elementos de interface, interações e animações tornam a web mais fácil e intuitiva principalmente quando caem em mãos de pessoas criativas.

Neste exemplo mostraei como criar um preloader para sua aplicação de forma simples e descomplicada. Você demorará 10 segundos para adicionar a funcionalidade em seu projeto. Siga os passos abaixo para implementação.

1_ Adicione a seguinte chamada de script no antes do fechamento do </head> da página.

<script type=”text/javascript”>
$(document).ready(function(){
$(‘#defaultcontainer’).fadeIn(2000);
jQuery(‘#loading’).hide();
});
</script>

2_ Vamos criar uma div com id=loading onde colocaremos nosso loader da página

<div id=”loading”>Loading…</div>

3_ No script que adicionamos há uma chamada para o id #defaultcontainer. Este id corresponde a div principal que envolve todo o conteúdo da página e vai até o fechando da tag </body>. Caso esteja utilizando algum outro nome basta trocar por #defaultcontainer. Adicione no CSS da div #defaultcontainer para display:none, isto deve-se pelo motivo que quando a página carregar o próprio Jquery trocará a propriedade DOM do elemento para display:block

Fácil não ? Você pode ver o script em funcionamento clicando aqui.