[TUTORIAL] Função de carregamento em páginas
Página 1 de 1 • Compartilhe

[TUTORIAL] Função de carregamento em páginas
![]() | Função de carregamento em páginas |
Em sites com toques profissionais encontramos scripts interessantes de quando clicamos em um link que redireciona para outra página emite um efeito "carregando". Neste tutorial vamos usar um efeito Jquery especial que vai reproduzir este efeito.
--> Tutoriais, dicas e astúcias <--
Função de carregamento em páginas
Função de carregamento em páginas
1º - Noção da função páginas javascript:
Para que seja possível proceguir é importante que saiba que precisamos ter conhecimento básico sobre a função Página javascript que temos em nosso painel de controle.
Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
Clique no botão "Criar um novo javascript" para passar-mos para o próximo passo.
2º - Criar o script:
Com a página de javascript aberta em seu painel de controle, teremos que adicionar um JS o qual fará com que uma página seja exibida a cada carregamento de página.
Em 'Investimento', marque para o efeito ser reproduzido "Em todas as páginas".
- Código:
/**
* Create a loading page while the current page is loading.
* @author: Luiz~
* @see: <a href="http://ajuda.forumeiros.com/">Fórum dos Fóruns</a>
* @licence: MIT
*/
(function ($) {
'use strict';
/**
* Main Config:
*/
var config = {
'icon': 'fa-spin',
'background': '#39c',
};
var marginTopQtt = ( $(window).height() / 2 ) - 60;
var style = [
'.page-loader {',
' position: fixed;',
' background-color: ' + config.background + ';',
' top: 0;',
' bottom: 0;',
' left: 0;',
' right: 0;',
' z-index: 99999999;',
' text-align: center;',
' color: #fff;',
' font-size: 20px;',
' opacity: 1;',
' -moz-transition: all 200ms;',
' -webkit-transition: all 200ms;',
' -ms-transition: all 200ms;',
' -o-transition: all 200ms;',
' transition: all 200ms;',
'}',
'',
'.page-loader-close {',
' opacity: 0;',
' z-index: -99999999;',
' pointer-events: none;',
'}',
'',
'.page-loader i.fa {',
' position: fixed;',
' margin-top: ' + marginTopQtt + 'px;',
'}',
].join('\n');
$('<style>', { text: style }).appendTo('head');
$('body')
.append([
'<div class="page-loader">',
' <i class="fa fa-circle-o-notch ' + config.icon + ' fa-3x fa-fw"></i>',
'</div>',
].join('\n'))
;
$(window).on('load', function () {
$('.page-loader').addClass('page-loader-close');
});
}(jQuery));
© Fórum dos Fóruns
![]() | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Função de carregamento em páginas |
Luciano98- Membro Proficiente
-
Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

» Função de carregamento em páginas
» Função de carregamento em páginas
» [TUTORIAL] Script de carregamento
» [TUTORIAL] Barra de progresso no carregamento das páginas
» Carregamento imediato das paginas
» Função de carregamento em páginas
» [TUTORIAL] Script de carregamento
» [TUTORIAL] Barra de progresso no carregamento das páginas
» Carregamento imediato das paginas
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos