Script carregamento

por iScroll 17.05.17 1:21

Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: PunBB

Estava dando uma olhada nesse fórum e achei isso interessante: http://prntscr.com/f8osyj
Até então só tinha visto para foruns do IPB/IPS, seria possível fazer esse mesmo script?
Fórum : http://ortem.forumeiros.com/f1-seu-primeiro-forum
(OBS: Procurei na net e não encontrei nada parecido)

por Luiz 17.05.17 1:28

Olá,

Crie um novo JS com investimento em todas as páginas com o código:

Código:: (function ($) { 'use strict'; $(window).on('load', function () { $('#ajax_loading').hide(); }); }(jQuery));

Feito isso, no seu template overall_header, abaixo da tag <body>, adicione:

Código:: <div id="ajax_loading" style="display: none;"><img src="http://i.imgur.com/gygr8wi.gif" alt="Loading..."></div>

E em seu CSS:

Código:: #ajax_loading { -moz-border-radius: 0 0 5px 5px; -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2); -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2); background: #000; border-radius: 0 0 5px 5px; box-shadow: 0 3px 5px rgba(0,0,0,0.2); color: #fff; left: 46%; opacity: .6; padding: 5px 0 8px; position: fixed; text-align: center; top: 0; width: 8%; z-index: 9999; z-index: 98989989989898; }

o/

por iScroll 17.05.17 16:20

Sem resultados :/

por Luiz 17.05.17 16:56

Troque o JS por este:

Código:: (function ($) { 'use strict'; $(function(){ setTimeout(function(){$('#ajax_loading').hide();}, 3000); }); }(jQuery));

Deve resolver. o/

por iScroll 17.05.17 17:29

Ainda sem resultados :/

por Luiz 17.05.17 17:40

Claro:
Troque o código HTML por:

Código:: <div id="ajax_loading"><img src="http://i.imgur.com/gygr8wi.gif" alt="Loading..."></div>

o/

por iScroll 17.05.17 20:11

Beleza, mas ele está sumindo do nada, teria como aplicar um efeito tanto descendo para aparecer quanto subindo para sumir ?

por Luiz 17.05.17 20:13

Descendo não dá, visto que ele já tem que estar lá antes da página carregar.
Para ele subir quando terminar de carregar, troque por:

Código:: (function ($) { 'use strict'; $(function(){ setTimeout(function(){$('#ajax_loading').css('top','-100px');}, 3000); }); }(jQuery));

por iScroll 17.05.17 20:37

Continua a mesma coisa, não mostra ele subindo, ou se mostra deve ser rápido. Creio que está faltando um transition aí, não ?

por Luiz 17.05.17 20:49

Sim, eu esqueci disso. Envergonhado

Pode adicionar no seu CSS:

o/

por iScroll 17.05.17 21:13

Boa meu garoto <3
Perfeito, obrigado.
Pode fechar Feliz

por Luiz 17.05.17 21:28

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.

Hitskin.com