Pular para o conteúdo principal

preloader()

preloader( int $time = 2300 ): void

A função preloader() cria e exibe uma tela de carregamento na página, que é ocultada automaticamente após um tempo definido. Seu propósito é melhorar a experiência do usuário ao fornecer um feedback visual de que o conteúdo está sendo carregado.

Parâmetros:
$time int (opcional)
Define o tempo em milissegundos para a animação da tela de carregamento. Padrão 2300.

Retorno: void
Imprime elementos HTML e JavaScript que só é visível no carremento da página

Exemplo de uso:

preloader();
preloader( 1500 );

Como Funciona:

A função gera uma estrutura HTML com a classe loader e injeta um script JavaScript na página. Após o tempo especificado no parâmetro $time, o script adiciona a classe loaded ao <body> do documento.

A lógica para a animação e o desaparecimento do preloader é gerenciada por meio de regras de CSS. Quando a classe loaded é adicionada ao <body>, isso dispara uma animação que move as duas "janelas" (os elementos com data-window="left" e data-window="right") para fora, revelando o conteúdo principal da página. Após a animação, o container principal .loader é ocultado, finalizando o efeito.

Casos de Uso:

  • Durante o Carregamento Inicial: A chamada pode ser incluída em qualquer parte do HTML, como no cabeçalho ou no final da página. Isso garante que o preloader seja exibido a cada carregamento completo da página.

  • De Forma Controlada: Você pode chamar a função condicionalmente. Por exemplo, ela pode ser exibida após o envio de um formulário ou durante o carregamento de conteúdo assíncrono, fornecendo um feedback visual ao usuário sobre o processo.

Essas função utiliza os kit preloader da biblioteca de componentes Packit UI

CSS:

.loader {
    --loaderWindow__background: #08111C;
    --loadingSize: 210px; /* width e height loading progress */
    --loadingCenter: -105px; /* metade de width e height */
    --loading__border-width: 4px; /* loading, loading::before, loading::after */
    --loading1__border-color: #1C3C63; /* loading */
    --loading2__border-color: #163050; /* loading::before */
    --loading3__border-color: #11243C; /* loading::after */
    --loadingSpace: 12px; /* espaço entre loading, loading::before, loading::after */

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1010;
}
.loading {
    position: relative;
    top: 50%;
    left: 50%;
    width: var(--loadingSize);
    height: var(--loadingSize);
    margin-top: var(--loadingCenter);
    margin-left: var(--loadingCenter);
    border-radius: 50%;
    border: var(--loading__border-width) solid transparent;
    border-top-color: var(--loading1__border-color);
    border-left-color: var(--loading1__border-color);
    animation: progress_circle 2s linear infinite;
    z-index: 1011;
}
.loading:before, .loading:after {
    position: absolute;
    content: "";
    border-radius: 50%;
    border: var(--loading__border-width) solid transparent;
}
.loading:before {
    inset: calc( (var(--loadingSpace) * 2) / 2.5 );
    border-top-color: var(--loading2__border-color);
    border-left-color: var(--loading2__border-color);
    animation: progress_circle 3s linear infinite;
}
.loading:after {
    inset: calc(var(--loadingSpace) * 2);
    border-top-color: var(--loading3__border-color);
    border-left-color: var(--loading3__border-color);
    animation: progress_circle 1.5s linear infinite;
}
.loader [data-window=left], .loader [data-window=right] {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: var(--loaderWindow__background);
    z-index: 1009;
    transform: translateX(0);
}
.loader [data-window=left] { left: 0 }
.loader [data-window=right] { right: 0 }

/* remove animacao */
body.loaded .loader [data-window=left] {
    transform: translateX(-100%);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

body.loaded .loader [data-window=right] {
    transform: translateX(100%);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

body.loaded .loading {
    opacity: 0;
    transition: all 0.3s ease-out;
}
body.loaded .loader {
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.3s 1s ease-out;
}

@keyframes progress_circle {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
}

Setor: Functions