[Résolu] Comment avoir un loader avec transition ?

Bonjour,
J'ai un loader qui fonctionne, le seul problème c'est que la div est blanche et le site apparaît sans transition.
Autre souci, le logo du site apparaît puis disparaît pendant le loading. Comment faire pour le masquer, que le logo apparaisse en même temps que le site ?
Mon HTML :
Mes CSS

<style>
#chargement {
  border: 12px solid #000;
  border-radius: 50%;
  border-top: 12px solid #DDD;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

et le js :

<script>
  document.onreadystatechange = function() 
  {
    if (document.readyState != "complete") 
    {
      document.querySelector("body").style.visibility = "hidden";
      document.querySelector("#chargement").style.visibility = "visible";
    } 
    else 
    {
      document.querySelector("#chargement").style.display = "none";
      document.querySelector("body").style.visibility = "visible";
    }
  };
</script>

Merci pour votre aide,
ED

Hello,

1. Pourquoi tu ne factorises pas tes sélecteurs ? (remaping le DOM)
2. display ou visibility ?

ps : EventTarget.addEventListener()
Modifié par niuxe (17 May 2022 - 00:54)

Bonjour niuxe,
Merci pour ta réponse.
malheureusement je ne suis pas développeur, juste un amateur... je ne comprends donc pas ce qui tu dis
Mais merci, puis-je en savoir plus ?
Bonne journée,
ED

Il n'y a pas de transition parce que tu n'en as pas défini.
Pour le logo il faudrait qu'on ai plus de code (le html notamment !).

pardon^^

<div id="chargement"></div>

<div class="container-fluid p-0 m-0">

	<header id="header">

		<div id="bgfadewrap">
			<div id="bgfade1">
				<div>
					<h1></h1>
				</div>
			</div>
			<div id="bgfade2">
				<div>
				<h1></h1>
				</div>
			</div>
			<div id="bgfade3">
				<div>
					<h1></h1>
				</div>
			</div>
		</div>

		<div id="menutop" class="menu">
			<nav class="navbar navbar-expand-sm p-0 m-0" aria-label="navbar">
			<div class="container-fluid p-0 m-0 align-items-start">

				<a href="#" class="navbar-brand"><img src="./imgs/logo_cut.png" alt="logo" ></a>
                
				<button class="navbar-toggler navbar-dark m-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTop" aria-controls="navbarTop" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>

				<div id="navbarTop" class="collapse navbar-collapse justify-content-end p-1 m-0">
					<ul class="nav navbar-nav px-3">
						<li class="nav-item">
							<a class="scrollTo" href="#section1">INTRO</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section2">SITES</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section3">STYLE</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section4">VIDEOS</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section5">PHOTOS</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section6">ME</a>
						</li>
					</ul>
				</div>

				</div>
			</nav>
		</div>

Merci
Modifié par el_debutanti (17 May 2022 - 15:16)

Visibility n'est pas animable car n'a pas de valeurs numériques. Lui préférer opacity.
Le truc qui doit tourner risque de ne pas tourner car pour moi il faut une étape 0%.
Si tu veux masquer ton logo avant la disparition du "loader", applique lui la même chose qu'au reste des éléments masqués.
Je suis étonné que ça marche d'ailleurs car ton #chargement est dans body...

Donc rien est bon
Sinon, j'ai un autre loader, mais la div opaque reste affichée (en ligne) mais fonctionne parfaitement en local.
Puis-je envoyer le js ?
Ce sont des scripts chopés sur la toile...
Merci et bonne fin de journée,
ED

Fait un codepen histoire qu'on ai tout sans avoir à demander les morceaux manquants au fur à mesure

AUtre loader pour ceux que ça intéresse :
https://jsfiddle.net/47PkH/
par contre, il n'y a pas de transition. mais ça fonctionne.
Une idée ?
Merci et bonne journée,
ED

Même problème, même solution.
PS : ça ça ne fait rien : document.getElementById('interactive');

Si c'est du js, je n'y connais rien.
pour la ligne citée, elle est supprimée
Merci

Je vais regarder de nouveau ton lien (mozilla... pas wikipédia ).