load-page

Biblioteca para criar paginas de carregamento

Descrição

A Load-Page é uma biblioteca leve que não necessita do jQuery para criação de páginas de carregamento.

Como instalar

Para instalar a Load-Page basta utilizar o NPM

Instalando com o NPM

npm install load-page

Como usar

Para utilizar o Load-Page é bem simples, basta seguir estes passos:

1º - Referencia-lo

Node

import LoadPage from 'loadPage'

HTML

<script src="node_modules/load-page/index.js" />

Nesta etapa estamos importanto a biblioteca Load-Page para o nosso arquivo

2º - Intância-lo

const loadPage = new LoadPage({})

Aqui estamos instanciando o objeto principal, o LoadPage

3º - Prepare o HTML

<div id="loadingPage">Carregando</div>
<div id="content">Aqui vai todo o conteúdo da sua página</div>

Está parte é muito importante. Para que tudo funcione bem você deve criar dois containers, um para o conteúdo que quer que apareça enquanto a página estiver carregando e outro o conteúdo da página propriamente dito. Por padrão o container de carregamento deve ter o id loadingPage e o conteúdo content. Porém isto e outros atributos podem ser modificados passando um objeto na contrução do objeto príncipal, veja os atributos abaixo.

Atributos objeto LoadPage

const loadPage = new LoadPage({
    loadingPage: "#loadingPage",
    loadedPage: "#content",
    delay: 2,
    titlePage: "Loading..."
})

Nome do atributo | Descrição | Tipo | Padrão :-----------------|--------------------------------------------------------------------|--------|--------------: loadingPage | classe ou id do container da página de carregamento | Texto | #loadingPage loadedPage | classe ou id do container do conteúdo carregado | Texto | #content delay | Tempo esperado depois de a página ser carregada | Número | 2 sec titlePage | Título da página enquanto estiver na página de carregamento | Texto | Loading...

4º Iniciando tudo

Depois de definir todos os atributos, basta invocar a função init do objeto LoadPage e pronto!

loadPage.init()

Resumindo

Seu código deve estar assim:

<div id="loadingPage">Carregando</div>
<div id="content">Aqui vai todo o conteúdo da sua página</div>

<script>
const loadPage = new LoadPage({
    loadingPage: "#loadingPage",
    loadedPage: "#content",
    delay: 2,
    titlePage: "Loading..."
}) // Instânciando o objeto LoadPage

loadPage.init() // Iniciando 
</script>

Resultado

Isto é apenas o básico, veja um exemplo real.