dopaminadarktheme
Full Dopamina Dark Theme
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.
Seja Membro Gratuítamente
Assine a newsletter para receber em seu email as publicações atualizadas neste blog