Aller au contenu
  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions générales !

[PARTAGE] Pré-loader

UnderFR

Par UnderFR
dans Addons

 Partager

Messages recommandés

UnderFR

UnderFR 31

Posté(e)
Posté(e) (modifié)

Welcome guys !

 

Aujourd'hui je vous partage un pré-loader que j'ai réalisé en très peu de temps certes, mais ça peut devenir à la mode ! :p 

 

En exemple, rendez-vous sur

Pour avoir accès à ce lien, merci de vous connecter.

, et dès que vous serrez sur la page, vous verrez une sorte de chargement,

c'est cela que je vous partage, le mien dure exactement 3000 ms ( 3 secondes ).

 

De plus, lorsque ce pre-loader s'affiche, le titre de la page se change en "Chargement...", puis 3 secondes après, il devient "{name} - Crée ton avatar, décore ton appart, chatte et fais-toi plein d'amis.".

 

Passons au tutoriel

 

Utilisation:

 

1: Placez ce code juste au dessous de votre balise <body>

  

                                                                  <div id="preloader">
                                                                      <div id="status"></div>
                                                                      <div id="loader"></div>
                                                                  </div>

2: Placez le code CSS, là où vous voulez, n'oubliez pas de l'importer si vous le copiez-collez sur autre page 

                                                      #preloader {
                                                          position: fixed;
                                                          top:0;
                                                          left:0;
                                                          right:0;
                                                          bottom:0;
                                                          background-color:#069; 
                                                          z-index:99; 
                                                      }

                                                      #status {
                                                          width:200px;
                                                          height:200px;
                                                          position:absolute;
                                                          left:50%; 
                                                          top:45%;
                                                          background-image:url(http://hsource.fr/font/habbo_groot/Habbo.gif);
                                                          background-repeat:no-repeat;
                                                          background-position:center;
                                                          margin:-100px 0 0 -100px; 

                                                              animation:bounce 1s linear infinite;

                                                      }
                                                      #loader{
                                                          width: 75px;
                                                          height: 75px;
                                                          top:55%;
                                                          left:46%;
                                                          border:solid 6px transparent;
                                                          border-radius: 50%;
                                                          border-top-color:#fff;
                                                          border-bottom-color:#fff;
                                                          animation:rotation 1s linear infinite;
                                                          position:relative;

                                                      }
                                                      @keyframes rotation {
                                                      0%{ transform: rotate(0deg); }
                                                      100%{ transform: rotate(360deg); }
                                                      }
                                                      @keyframes bounce {
                                                           from {top: 45%;}
                                                           50%  {top: 47%;}
                                                           to   {top: 45%;}
                                                      }

 

3: Pour finir, il ne reste plus qu'à insérer le code javascript, dans votre page ou bien ailleurs, mais comme le CSS, n'oubliez pas de l'importer, si vous le copiez-collez ailleur

  

                                                document.title="Chargement...";
                                                setInterval(function(){document.title=  "{CODE PHP POUR RECUPERER LE NOM DU RETRO} - Crée ton avatar, décore ton appart, chatte et fais-toi
                                                                       plein d'amis.";},3000);
                                                        $('#status').delay(3000).fadeOut('slow'); 
                                                         $('#preloader').delay(3000).fadeOut('slow'); 
                                                                  $('#loader').delay(3000).fadeOut('slow'); 
                                                       $('body').delay(3000).css({'overflow':'visible'});

PS: N'oubliez pas de compléter la seconde ligne du code javascript !

 

Voici un petit .gif : 

Pour avoir accès à ce lien, merci de vous connecter.

 

Et voilà c'est terminé, vous n'avez plus qu'à actualiser, et votre page vous présentera un pré-loader ! :) 

 

UnderFR, Enjoy !

Modifié par UnderFR

Lâches un like :y: ! ou pas

  • J'aime 2
  • J'adore 1
  • Merci 1
Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...