Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • 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 !
Sign in to follow this  
UnderFR

 addons [PARTAGE] Pré-loader

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

Please login or register to see this link.

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

Please login or register to see this link.

 

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

Share this post


Link to post
Share on other sites
Modérateur

Bonne idée !

MPLP!.png.56b87efcbc358392cea901982bef32cc.png

Share this post


Link to post
Share on other sites
Premium

je n’arrive pas a l’installer a partir du javascript :/  :/ 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...