UnderFR 31 Posted August 9, 2017 Share Posted August 9, 2017 (edited) 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 ! En exemple, rendez-vous sur http://habbo.fr, 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 : https://gyazo.com/be5e78a5582e0254b44bfb08005aa1c2 Et voilà c'est terminé, vous n'avez plus qu'à actualiser, et votre page vous présentera un pré-loader ! UnderFR, Enjoy ! Edited August 9, 2017 by UnderFR 2 1 1 Lâches un like ! ou pas Link to comment Share on other sites More sharing options...
Luxury Jared 44 Posted August 9, 2017 Share Posted August 9, 2017 J'aime bien on pourrais pas avoir un screen ou gif ? . Link to comment Share on other sites More sharing options...
UnderFR 31 Posted August 9, 2017 Author Share Posted August 9, 2017 à l’instant, Luxury.Dev a dit : J'aime bien on pourrais pas avoir un screen ou gif ? . Je vais éditer Lâches un like ! ou pas Link to comment Share on other sites More sharing options...
Luxury Jared 44 Posted August 9, 2017 Share Posted August 9, 2017 à l’instant, UnderFR a dit : Je vais éditer D'accord j'attend alors Link to comment Share on other sites More sharing options...
UnderFR 31 Posted August 9, 2017 Author Share Posted August 9, 2017 Le .gif est disponible ! Lâches un like ! ou pas Link to comment Share on other sites More sharing options...
Modérateur Henri 80 Posted August 9, 2017 Modérateur Share Posted August 9, 2017 Bonne idée ! ~ Henri Développeur WEB, NodeJS et C Discord: Henri#003 Twitter: @UnrealHenri Link to comment Share on other sites More sharing options...
UnderFR 31 Posted August 9, 2017 Author Share Posted August 9, 2017 à l’instant, CptHenri a dit : Bonne idée ! Merci ! Lâches un like ! ou pas Link to comment Share on other sites More sharing options...
Umbrella 12 Posted August 10, 2017 Share Posted August 10, 2017 je n’arrive pas a l’installer a partir du javascript [ Rien de mieux que d'apprendre par sois même ] #Autodidacte Link to comment Share on other sites More sharing options...
UnderFR 31 Posted August 10, 2017 Author Share Posted August 10, 2017 Il y a 4 heures, FabienHF a dit : je n’arrive pas a l’installer a partir du javascript Passe PV. Lâches un like ! ou pas Link to comment Share on other sites More sharing options...
HichemS 2 Posted August 11, 2017 Share Posted August 11, 2017 Salut 'ai un petit problème avec le loader peut tu me passer un moyens de te contacté? Link to comment Share on other sites More sharing options...
HichemS 2 Posted August 12, 2017 Share Posted August 12, 2017 Résolu Link to comment Share on other sites More sharing options...
UnderFR 31 Posted August 12, 2017 Author Share Posted August 12, 2017 il y a 1 minute, HichemS a dit : Résolu No problems, n'hésite pas en cas ! 1 Lâches un like ! ou pas Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now