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.
