Veuillez vous connecter ou créer un compte pour suivre ce topic
Ce topic est suivi par: Jerem971, kajc
Ce topic a été résolu
Auteur Sujet: Animation de chargement de Page

kajc

Messages: 13

Bonjour a tous ♥,
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 ♥♥♥
Publicité

Jerem971

Messages: 831

Hello @kajc,

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é 😁

kajc

Messages: 13

Merci pour ton aide

Jerem971

Messages: 831

Re:

Avec plaisir ! 😉

Bonne continuation sur PrimFX.com ! 😉


Vous devez vous connecter ou créer un compte pour poster une réponse