Criando um preloader simples com Jquery

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.