Como loading page da home carregar panas quando acessado a primeira vez?

Estou aprendendo html, css e php, e quero limitar esse loanding apenas no primeiro acesso do sistema, sendo da tela de login para tela home! Mais não sei como faço essa validação com javaScrip ou php, pois toda a vez que o usuário acessa a home carrega a loading page. alguem pode me ajudar?

html

<?php
    session_start();
    if(!isset($_SESSION['id_usuario'])){
        header("location:index.php");
        exit;<pre>

    }
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/estilo_principal.css">
    <script src="js/script.js" defer="defer"> </script>
    <title>Inicio</title>
</head>
<div id="loading" style="display: block">
    <h1>Preparando sua area de gestão...</h1>
        <div class="load">
            <div></div>
            <div></div>
            <div></div>
        </div>
</div>
 <div id="conteudo" style="display: none">
     <body> ......</body>

</i>
CSS

/*Configuração do loading*/
#loading{
    width: 99vw;
    height: 97vh;
    background-color: #fff;
    padding-top: 10em;
}
#loading> h1{
    margin-bottom: 2.5em;
    text-align:center;
    color: var(--cor5);
    font-size: 2.5em;
    font-family: var(--fonte-destaque);
    font-weight: 500;
}
#loading .load{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#loading .load > div{
    width: 50px;
    height: 50px;
    background: linear-gradient(var(--cor0), var(--cor4));
    margin: 15px;
    border-radius: 50%;
    animation: anima 1s ease-in-out infinite alternate;
}
#loading .load div:nth-child(1){
    animation-delay: -0.4s;
}
#loading .load div:nth-child(2){
    animation-delay: -0.2s;
}
/*Animação */
@keyframes anima{
    from{
        transform: translateY(-100%);
    }to{
        transform: translateY(100%);
    }
}

JS

var i = setInterval(function () {
    clearInterval(i);
    document.getElementById("loading").style.display = "none";
    document.getElementById("conteudo").style.display = "inline";
}, 5000);

</pre>

1 Resposta

Topicos relacionados