<h1>Fond bleu : en cours de chargement / Fond vert : chargement terminé</h1>
<button>Cliquez ici</button>
body {
height: 100vh;
background: green;
}
body.loading, body.loading * {
cursor: progress !important;
}
h1 {
color: white;
}
a {
cursor: pointer;
color: white;
}
window.setLoadingFlag = function () {
window.isLoading = true;
document.body.className += ' loading';
};
window.removeLoadingFlag = function () {
window.isLoading = false
document.body.className -= ' loading';
};
var bodyStyle = document.body.style
setInterval(() => {
if (window.isLoading) {
bodyStyle.background = 'green';
removeLoadingFlag();
} else {
bodyStyle.background = 'blue';
setLoadingFlag();
}
}, 1000)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.