Discussion :

[el_debutanti]

Bonsoir,
Je souhaiterais mettre ce loading :
https://codepen.io/worodhazam/pen/NWyxRYZ
sur mon site, mais je suis loin d'avoir le même résultats.
Mes CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#chargement {
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 50%;
	right: 0;
	z-index: 99999999999999;
	transform: translate(-50%, -50%);
	color: white;
	background-color: black;
	box-sizing: border-box;
	Margin: 0;
}
 
#chargement span {
  font-size: 80px;
  letter-spacing: 5px;
  text-transform: uppercase;
  line-height: 1;
  mix-blend-mode: difference;
}
#chargement::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100%;
  background-color: white;
  animation: move 4s linear infinite;
}
@keyframes move {
  0%,
  100% {
    left: 0;
  }
  50% {
    left: calc(100% - 100px);
  }
}

Mon HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et mon JS :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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 et bonne soirée

[darkstar123456]

Bonjour,

Qu'est-ce qui vous pose problème ? Qu'est-ce que vous n'arrivez pas à faire exactement ?
En plus, vous avez donné un lien où il y a tout le code pour arriver à faire ce que vous voulez faire, donc à part redonner le même code (ou presque), ça va pas beaucoup vous aider ^^

Sinon, personnellement, je ne jouerais pas sur la visibilité de body mais je mettrais plutôt le loader par dessus tout le site en position: fixed et avec un z-index suffisamment élevé qu'aucun contenu ne sera visible
Aussi, par facilité, je mettrais des classes sur le loader pour gérer sa visibilité, ça permettra de facilement mettre un petit effet fade (ou n'importe quel effet), plutôt que la disparition instantanée actuellement

[NoSmoking]

Bonjour,
peut-être faudrait-il que tu comprennes ce que fait ton script !

Utilise plutôt :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
window.addEventListener("DOMContentLoaded", function() {
  document.getElementById("chargement")
    .style.display = "none";
});

ou alors

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
window.addEventListener("load", function() {
  document.getElementById("chargement")
    .style.display = "none";
});

suivant le cas

[darkstar123456]

Hello,

Voici comment je l'aurais fait selon les explications de mon post précédent : https://codepen.io/DarkStar123456/pe...b?editors=0100

J'ai donc mis un div#loader-wrapper pour englober le loader afin de la placer par-dessus tout le contenu
J'ai utilisé Flexbox pour positionner mon contenu facilement
J'ai utilisé opacity: 1; transition: 0.5s all ease-in-out; afin de préparer à l'animation fadeout au chargement
J'ai énormément simplifié le code JS aussi tant qu'à faire... le code ne fait rien jusqu'à ce que le loading soit fini et là j'ajoute la classe hide sur div#loader-wrapper afin de le cacher

[el_debutanti]

Bonjour,
Merci BEAUCOUP darkstar123456 mais je n'arrive pas sur ma page à la fin du loading
Mais c'est ce que je voulais.
Merci BEAUCOUP NoSmoking, voilà ce que ça me donne :
https://codepen.io/herde2/pen/ZErXvoY
Bon après-midi,
ED

[darkstar123456]

Bonjour,

je n'arrive pas sur ma page à la fin du loading

Montre nous le code dont tu parles. Il n'y a aucun contenu dans le code que tu présente, donc si tu vois une page blanche c'est que ça fonctionne.
C'est pour ça que j'ai écrit quelque chose dans mon exemple, afin qu'on ait autre chose que le loader à afficher
En modifiant l'HTML, je vois bien le loader et enfin l'affichage du paragraphe :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<p>
  Coucou !
</p>
<div id="chargement"><span>Loading</span></div>

Pour ce qui est de ton code, je te conseille plutôt d'utiliser la 2e solution de @NoSmoking comme je l'ai fait dans mon exemple (https://codepen.io/DarkStar123456/pen/LYQzWxb)
En effet, il y a une différence entre les 2 événements. Pour faire simple, l'événement DOMContentLoaded est trigger dès que l'HTML est affiché (sans tenir compte du chargement des fichiers externes telles que les CSS et les images)
A l'inverse, l'événement load n'est trigger que quand la page est vraiment finie de charger

Il est facile de tester la différence en essayant d'afficher une image de plusieurs méga, sinon il est possible de simuler des vitesses de connexion depuis la console de Google Chrome

[el_debutanti]

GENIAL !!!!!!
Merci à vous deux... TOP !!!!!!