Comment afficher un loader pendant le chargement d'une page HTML ?

Réponses rédigées par Antoine
Dernière mise à jour : 2022-03-22 10:28:02
Thèmes : html - css - javascript
Question

Comment faire pour afficher un loader pendant le chargement d'une page HTML ?

Réponse

Pour afficher un loader pendant le chargement d'une page HTML, vous pouvez utiliser du code CSS pour concevoir le loader, et la propriété JavaScript Document.readyState pour détecter lorsque la page a terminé de se charger.

Voici un exemple afficher un loader pendant le chargement d'une page HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Comment afficher un loader pendant le chargement de la page</title>
</head>
<body>
<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);
  }
}
</style>
</head>
<body>
<div id="chargement"></div>
<img src="https://images-assets.nasa.gov/image/NHQ202203180019/NHQ202203180019~medium.jpg" alt="">
<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>
</body>
</html>

Remarque : Dans cet exemple la variable readyState doit être égale à la valeur complete pour que le loader ne s'affiche plus. On pourrait la remplacer par la valeur interactive pour éviter un loader à rallonge, dans le cas où une librairie externe du type CDN mette du temps à charger ; mais le temps de chargement des médias ne serait alors plus pris en compte.