Loading Page EffectEste é um código exclusivo desenvolvido exclusivamente para membros do fórum Staffer Group BR™, ele bloqueia a página até que ela esteja 100% carregada, o que é um excelente "anti bug" para forumeiros. Em contra partida, para quem tem internet lenta, ele é um grande empecilho, uma vez que a internet demore a carregar a página, ele ficará com a mesma bloqueada por muito tempo.Versões de funcionamento: Todas as versões.

1º Passo - Inserindo o CSS
O CSS é responsável pelo design do projeto e seu posicionamento, sem ele o código não irá ter a aparência desejada. Instale o CSS no local correto, salve e vamos ao passo nº 2. Como fazer isto

Código:

/* Loading Page Effect (Tutorial = http://staffergroupbr.stuning.net/t1123-) */
#pb-loading {
  position: fixed;
  z-index: 50;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #FDFEF8 url(http://i15.servimg.com/u/f15/17/71/75/73/carreg10.gif) no-repeat center;
    line-height: 350px;
  text-align: center;
  font-size: 36px;
  color: #353231;
  text-indent: -9999px;
}
.PB #pb-loading { display: none; }
@media only screen and (device-width: 768px) {
  #loading {
      position:absolute;
      width:1040px;
      min-height:768px;
  }
}
#pb-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  background: #de1301;
  opacity: 0.8;
  width: 0;
  height: 18px;
  background-color: #2780c7;
}
#pb-loader {
  height: 100%;
  display: none;
}
/* Tutorial = http://staffergroupbr.stuning.net/t1123- */

2º Passo - JavaScript de funcionamento
O JavaScript, como já citado, serve para dar a interatividade com o projeto, com ele você conseguirá ver todos os efeitos se movimentando e dando alertas para o usuário. Instale-o corretamente utilizando a opção de investimento Em todas as páginas e vamos ao ultimo passo. Como fazer isto

Código:

(function ($) {
  /* Tutorial = http://staffergroupbr.stuning.net/t1123-vip-tutorialloading-page-effect */
  $("HTML").removeClass("PB");

  $("#header").ready(function () {
    $("#pb-progress-bar").stop().animate({
      width: "25%"
    }, 1500)
  });
  $("#footer").ready(function () {
    $("#pb-progress-bar").stop().animate({
      width: "75%"
    }, 1500)
  });

  $(window).load(function () {
    $("#pb-progress-bar").stop().animate({
      width: "100%"
    }, 600, function () {
      $("#pb-loading").fadeOut("fast", function () {
        $(this).remove();
      });
    });
  });
})(jQuery);

3º Passo - Exibindo o projeto
O Projeto é o que da a alma ao produto final, para que ele seja visível no fórum teremos que criar um widget personalizado, dependendo da sua versão, o código pode ser inserido dentro dos templates do fórum, neste caso vamos por em um widget e marcar a opção de Utilizar um table type: .

Código:

<div id='pb-loading'><div id='pb-progress-bar'></div><div id='pb-loader'>Loading...</div></div>

• Resultado Final
  

---

Staffer Group BR
PRECISA DE SUPORTE?

Criador: D'Leandro / Personalizaro Blogger Site: http://staffergroupbr.stuning.net/t1123-vip-tutorialloading-page-effect

Fantástico, Simplesmente incrível.

oi

muito bom

Clique neste link para fazer o download em nova aba!

,mns.kjsçkj

m.nnçn

muito bom