Adapter un loader en CSS

Version imprimable

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:

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:

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

et mon JS :

Code:

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 :)

24/05/2022, 08h14
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

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

Utilise plutôt :
Code:

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

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

24/05/2022, 08h28
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
24/05/2022, 14h23
el_debutanti

Bonjour,
Merci BEAUCOUP darkstar123456 mais je n'arrive pas sur ma page à la fin du loading :weird:
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
24/05/2022, 14h41
darkstar123456
Bonjour,

Citation:

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:

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
24/05/2022, 15h21
el_debutanti

GENIAL !!!!!! :ptdr:
Merci à vous deux... TOP !!!!!!
:zoubi:
24/05/2022, 22h18
el_debutanti

reBonjour/Bonsoir,
Sur SAFARI, le site s'affiche avant le loader. Je dirais même qu'une fenêtre modale s'affiche aussi avant :weird:
Comment faire pour que le loader s'affiche... dès le début ?
Après, je vous laisse :)
Merci !
25/05/2022, 08h20
darkstar123456
Bonjour,

Mettre le CSS le plus haut possible, voir directement dans le head
Code:

1 2 3 4 5 6 <head> <title>Titre de la page</title> <style> /** ICI LE CODE CSS DU LOADER **/ </style> </head>
Si ça ne marche pas, c'est un problème de rendu du navigateur... ca arrive parfois (et surtout avec Safari ^^)
25/05/2022, 15h22
el_debutanti

Merci beaucoup darkstar123456, t'es génial !!!!!