Preloader
Création d'un Preloader
Dans ce tutoriel, nous allons vous montrer comment créer un preloader pour votre site web en HTML, CSS et Javascript.
Un preloader est un élément visuel qui s'affiche pendant le chargement de la page pour indiquer à l'utilisateur que le contenu est en cours de chargement. Suivez les étapes ci-dessous pour ajouter un preloader à votre site web.
Étape 1 : Créer la structure HTML
Tout d'abord, nous allons créer un nouveau fichier HTML et ajoutez les balises HTML de base :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
<!--Nous mettrons le code css ici -->
</style>
<title>Tuto Preloader/RudLess</title>
</head>
<body>
<script>
<!--Nous mettrons le code javascript ici -->
</script>
</body>
</html>
Étape 2 : Ajouter le style CSS
À l'intérieur de la balise <style>, ajoutez le style pour le preloader et le contenu, ainsi que l'animation pour le loader.
<style>
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.content {
display: none;
}
</style>
Étape 3 : Créer le preloader
À l'intérieur du corps de la page, ajoutez une div avec la classe preloader et une div à l'intérieur avec la classe "loader".
La div preloader sera affichée au chargement de la page, tandis que la div content sera cachée.
<div class="preloader">
<div class="loader"></div>
</div>
<div class="content">
<h1>Contenu de la page</h1>
</div>
Étape 4 : Afficher le contenu après le chargement de la page
Ajoutez un événement load à la fenêtre pour détecter lorsque la page est entièrement chargée.
À l'intérieur de cet événement, utilisez setTimeout pour cacher le preloader et afficher le contenu après un
délai de 2000 millisecondes (2 secondes).
<script>
window.addEventListener('load', function() {
setTimeout(() => {
document.querySelector('.preloader').style.display = 'none';
document.querySelector('.content').style.display = 'block';
}, 2000);
});
</script>
Enfin, nous allons composer tous les codes ensemble dans le document HTML pour créer notre preloader complet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.content {
display: none;
}
</style>
<title>Preloader Example</title>
</head>
<body>
<div class="preloader">
<div class="loader"></div>
</div>
<div class="content">
<h1>Contenu de la page</h1>
</div>
<script>
window.addEventListener('load', function() {
setTimeout(() => {
document.querySelector('.preloader').style.display = 'none';
document.querySelector('.content').style.display = 'block';
}, 2000);
});
</script>
</body>
</html>
Et voilà ! Vous avez maintenant un preloader fonctionnel pour votre site web.