11485 sujets

JavaScript, DOM et API Web HTML5

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

Pages :
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
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 Smiley ohwell
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 !).
Bonjour kerlutinoec,
Voici le HTML :
		<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>

et... comment définir une transition ?
Merci pour ton aide,
ED
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 Smiley smile
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 Smiley ohwell
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
Bonjour kerlutinoec,
Je comprends bien les transitions pour le :hover. Mais pour ce qui est de mon cas Smiley decu
Bonne journée,
ED
Déjà il faut que tu utilises des propriétés qui acceptent les transitions (voir liste dans le lien).
'Visibility' n'accepte pas les transitions.
Ensuite le mieux est de faire une classe pour ton état final et de l'appliquer par ton javascript avec .classList.add(), sans oublier le CSS transition pour ton élément.
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à