28172 sujets

CSS et mise en forme, CSS3

Mettre un loader en CSS sur une page.

Bonjour,
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 :
#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);
  }
}

Le HTML :
<div id="chargement"><span>Loading</span></div>

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 et bonne journée,
ED
Bonjour,

Premièrement il semblerait que ton bloc #chargement s'affiche plus grand que ce qu'il devrait être...

La technique pour centrer est ok : top et left à 50% pour placer le coin supérieur gauche du bloc au centre puis transform translate en négatif pour le recentrer par rapport à ses dimensions.
Mais si tu as right et bottom à 0, on comprend, en retirant transform, que ça fait que ton bloc prend la taille d'un quart de son plus proche ancêtre positionné (s'il n'en a pas, un quart de la page).
Tu devais peut-être avoir une bonne raison d'indiquer right et bottom ?

C'est tout ce que je vois qui pouvait poser problème pour la mise en forme, mais n'hésite pas à dire s'il y a d'autres choses Smiley cligne !
Meilleure solution
Bonjour CelticKiwi,
Merci beaucoup pour ces précisions Smiley smile
Je pense que le problème vient du script chopé sur un autre tuto que le CodePen, que j'ai modifié... en y connaissant rien Smiley confused
Je vais tenté un truc plus simple Smiley cligne
Encore merci,
ED
Sujet clos
Aller à