HTML CSS JS preload que fica parado e não some/// my preloader don't disappear

HenriFuji · Agosto 12, 2021, 2:21pm

So I starting on HTML CSS JS learning, and then I’m programming my first web site, then I wanted to put a preloader however it stays loading, and doesn’t disappear.
Então eu estou começando na aprendizagem do HTML CSS JS, e eu estou programando meu 1º web, quis colocar uma tela de carregamento, mas fica rodando sem desaparecer.

HTML

!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="utf-8">

    <title>O grupo LGBTQIAP+ no mercado de trabalho</title>

    <link rel="stylesheet" href="style.css" />

</head>

<body>

    <div class="loader">

        <img src="364.gif" alt="">

    </div>

    <header>

        <div id="div1"></div>

        <div id="div2"></div>

        <div id="div3"><strong>O grupo LGBTQIAP+ no mercado de trabalho</strong></div>

        <div id="div4"></div>

        <div id="div5"></div>

        <div id="div6"></div>

        <p>

            Aluno: Henrique Holsback Fujikawa<br> data: Agosto, 2021;<br> Técnico de informática, IFMS<br> Profº Fábio Luiz Faria da Silva<br> Tópicos de linguagem de programação<br>

        </p>

    </header>

    <main>

        <div id="div10">

            <div id="div12" style="clear: left;">

                <p><img id="gif2" src="giphy.gif">

                    <img style="float: right;" id="gif1" src="giphy.gif">

                </p>

            </div>

            <p font-size: 25px;>

                <h1 style="text-align: center;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;O grupo LGBTQIAP+ no mercado de trabalho

                </h1>

            </p>

            <p style="text-align: justify; font-size: 20px;">

                <br><br><br><br><br><br><br> &emsp;&emsp;&nbsp;Atualmente no Brasil cerca de 14,7% da população total, está desempregada, totalizando 14,7 milhões de pessoas desesperadas em busca de uma renda, além de horrorizadas com os preços de produtos

                nos mercados e lojas, e contas aumentando cada vez mais, dentre muitas dessas pessoas estão as pessoas que pertencem ao LGBTQIAP+. Com o intuito de informar mais sobre esse asunto a presente pesquisa tem como objetvo:

            </p>

        </div>

    </main>

    <footer>

    </footer>

    <p>

    </p>

</body>

</html>

CSS

* {

    margin: 0;

    padding: 0;

}

.loader {

    position: fixed;

    top: 0;

    left: 0;

    background-color: rgb(255, 196, 0);

    height: 100%;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}

.disappear {

    animation: vanish 1s forwards;

}

@keyframes vanish {

    100% {

        opacity: 0;

        visibility: hidden;

    }

}

body {

    background-color: black;

    color: white;

}

p {

    font-size: 16px;

}

div {

    height: 50px

}

#div1 {

    background-color: red;

}

#div2 {

    background-color: orange;

}

#div3 {

    background-color: yellow;

    text-align: center;

    font-size: 35px;

    color: black;

    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif

}

#div4 {

    background-color: rgb(18, 199, 18);

}

#div5 {

    background-color: blue;

}

#div6 {

    background-color: purple;

}

#div10 {

    font-family: 'Times New Roman', Times, serif;

    text-align: justify;

    margin-top: 2%;

    font-weight: 600;

    margin-left: 1%;

    padding: 30px;

    border: double;

    width: 1250px;

    height: 1000px;

    background-color: rgba(255, 0, 128, 0.911);

}

img {

    height: auto;

    width: auto;

    max-width: 210px;

    max-height: 250px;

}

JS

var loader = document.querySelector("loader");

window.addEventListener("load", vanish);

function vanish() {

    loader.classList.add("disppear");

}

HELP!!!
AJUDA!!!

Lucas_Camara · Agosto 12, 2021, 4:43pm

Talvez vc possa manter essa estrutura para ativar e desativar o loading:

<!DOCTYPE html>
<html>

<head>
	<title>Page Title</title>

	<script>
		// ative o loading aqui
		console.log('iniciando...');
	</script>
</head>

<body>
	<h1>My First Heading</h1>
	<p>My first paragraph.</p>

	<script>
		// desative o loading aqui
		console.log('iniciado!');
	</script>
</body>
</html>

Repare nas tags script do html. No seu caso, acho que será mais simples do que manipular os eventos da página.

HenriFuji · Agosto 12, 2021, 5:35pm

não funciona

Lucas_Camara · Agosto 12, 2021, 5:43pm

Pq não funcionou? Deu algum erro no console? Como vc fez depois q postei a ideia?

HenriFuji · Agosto 12, 2021, 5:46pm

Acredito que fiz errado msm, pois adicionei o script no head e o outro no body pra poder testar, primeiro não fez nada dps coloquei o script dentro do div só que não deu certo, alguma dica de como colocar certinho?/

Lucas_Camara · Agosto 12, 2021, 6:34pm

Ah, reparei agora que essa parte está errada:

var loader = document.querySelector("loader");

Como loader é uma classe CSS, vc deve usar o seletor assim:

var loader = document.querySelector(".loader");
                                     ^

Seletores de classes devem ter um . (ponto) antes.

HenriFuji · Agosto 12, 2021, 8:45pm

então ele ainda não tá funcionando

Lucas_Camara · Agosto 12, 2021, 8:55pm

Manda ai o código atualizado pra gente ver.

HenriFuji · Agosto 12, 2021, 10:00pm

<meta charset="utf-8">

<title>O grupo LGBTQIAP+ no mercado de trabalho</title>

<link rel="stylesheet" href="style.css" />

<script>

    function myFunction() {

        alert("Preparece para oq está por vir...");

    }

</script>

<div class="loader">

    <img src="364.gif" alt="">

</div>

<header>

    <div id="div1"></div>

    <div id="div2"></div>

    <div id="div3"><strong>O grupo LGBTQIAP+ no mercado de trabalho</strong></div>

    <div id="div4"></div>

    <div id="div5"></div>

    <div id="div6"></div>

    <p>

        Aluno: Henrique Holsback Fujikawa<br> data: Agosto, 2021;<br> Técnico de informática, IFMS<br> Profº Fábio Luiz Faria da Silva<br> Tópicos de linguagem de programação<br>

    </p>

</header>

<main>

    <div id="div10">

        <div id="div12" style="clear: left;">

            <p><img id="gif2" src="giphy.gif">

                <img style="float: right;" id="gif1" src="giphy.gif">

            </p>

        </div>

        <p font-size: 25px;>

            <h1 style="text-align: center;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;O grupo LGBTQIAP+ no mercado de trabalho

            </h1>

        </p>

        <p style="text-align: justify; font-size: 20px;">

            <br><br><br><br><br><br><br> &emsp;&emsp;&nbsp;Atualmente no Brasil cerca de 14,7% da população total, está desempregada, totalizando 14,7 milhões de pessoas desesperadas em busca de uma renda, além de horrorizadas com os preços de produtos

            nos mercados e lojas, e contas aumentando cada vez mais, dentre muitas dessas pessoas estão as pessoas que pertencem ao LGBTQIAP+. Com o intuito de informar mais sobre esse asunto a presente pesquisa tem como objetvo:

        </p>

    </div>

</main>

<footer>

</footer>

<p>

</p>

CSS

HenriFuji · Agosto 12, 2021, 10:02pm

CSS

{

margin: 0;

padding: 0;

}

.loader {

position: fixed;

top: 0;

left: 0;

background-color: rgb(255, 196, 0);

height: 100%;

width: 100%;

display: flex;

justify-content: center;

align-items: center;

}

.disappear {

animation: vanish 1s forwards;

}

@keyframes vanish {

100% {

    opacity: 0;

    visibility: hidden;

}

}

body {

background-color: black;

color: white;

}

p {

font-size: 16px;

}

div {

height: 50px

}

#div1 {

background-color: red;

}

#div2 {

background-color: orange;

}

#div3 {

background-color: yellow;

text-align: center;

font-size: 35px;

color: black;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif

}

#div4 {

background-color: rgb(18, 199, 18);

}

#div5 {

background-color: blue;

}

#div6 {

background-color: purple;

}

#div10 {

font-family: 'Times New Roman', Times, serif;

text-align: justify;

margin-top: 2%;

font-weight: 600;

margin-left: 1%;

padding: 30px;

border: double;

width: 1250px;

height: 1000px;

background-color: rgba(255, 0, 128, 0.911);

}

img {

height: auto;

width: auto;

max-width: 210px;

max-height: 250px;

}
JS
var loader = document.querySelector(".loader");

window.addEventListener(".load", vanish);

function vanish() {

loader.classList.add(".disppear");

}

HTML CSS JS preload que fica parado e não some/// my preloader don't disappear

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI