Jump to content
  • Please do not post a message for the purpose of insulting, incitement to hatred, sexual remarks and any other which does not respect our terms of use !

[PARTAGE] Pré-loader


UnderFR

Recommended Posts

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

To access this link, please log in.

, 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 : 

To access this link, please log in.

 

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

 

UnderFR, Enjoy !

Edited by UnderFR

Lâches un like :y: ! ou pas

  • J'aime 2
  • J'adore 1
  • Merci 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...