Animation de chargement de Page
kajc Le 27 août 2019 à 16:52 (Édité le 8 septembre 2019 à 02:36)
c'est Kajc et vous remercie d'avoir regarder ce topic.
Le probleme le voici :
Je voudrais creer une petit animation avant le chargement complet de ma page web pendant le moment de chargement et
sa disparition apres l'affichage de toute la page ...
-Merci ♥♥♥
Profil introuvable Le 27 août 2019 à 19:43 (Édité le 27 août 2019 à 19:52)
Pour ça, je te renvoie sur le tutoriel de Jonathan concernant les loaders animés 😉
Ce tutoriel t'explique comment créer des loaders animés mais il ne t'explique pas comment mettre en place le loader voulu.
C'est simple (basique, simple) :
Tu choisis déjà le loader que tu veux mettre en place sur ton site selon la liste que Jonathan à créer tout au long du tutoriel. La mise en place du loader doit prendre toute la page.
Ensuite, dans ton code HTML, tu places ce code JS (ce code gérera l'apparition du loader au chargement et sa disparition lorsque tout le contenu de la page a chargé) :
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(window).load(function() {
$(".section").fadeOut("1000");
})
</script>Et ensuite tu places ce code après l'ouverture de la balise "body" (ce code défini la zone ou se trouve le loader donc dans le corps de la page) :
<div class="section">
<div class="zone_loader">
<span class="loader loader-quart"></span>
<span class="loading">Chargement...</span>
</div>
</div>Il te reste à modifier le CSS fournis par Jonathan pour que loader prenne toute la largeur et la hauteur de chaque écrans qui existe dans le monde. Le loader lui doit être bien centré au milieu de l'écran quelque soit la taille.
Si JavaScript est désactivé ou si le navigateur n'est pas à jour, le loader ne fonctionnera pas, il faudra inciter tes visiteurs à mettre à jour leur navigateurs au moyen de ce projet.
J'espère t'avoir aidé 😁
Profil introuvable Le 8 septembre 2019 à 02:59 (Édité le 8 septembre 2019 à 03:00)
Avec plaisir ! 😉
Bonne continuation sur PrimFX.com ! 😉
