How to create a p reloader? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

How to create a p reloader?

Please anyone send me preloader, the logo should come first and after name should come that should go and fix on the top. Please help me.

10th Mar 2018, 1:16 PM
Manjunath M Onarotti
Manjunath M Onarotti - avatar
2 Answers
+ 1
1. Add a div just after <body> tag. <div class="se-pre-con"></div> 2. Add some CSS to show the icon and bring it in the middle of the page. /* Paste this css to your style sheet file or under head tag */ /* This only works with JavaScript, if it's not present, don't show loader */ .no-js #loader { display: none; } .js #loader { display: block; position: absolute; left: 100px; top: 0; } .se-pre-con { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff; } 3. Now add some jQuery to show the pre-loading icon when the page is loading and hide when it has finished loading. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script> //paste this code under the head tag or in a separate js file. // Wait for window load $(window).load(function() { // Animate loader off screen $(".se-pre-con").fadeOut("slow");; }); All done, now reload your page and it will show a loading icon.
12th Mar 2018, 1:44 AM
Amey Bhavsar
Amey Bhavsar - avatar
0
Thank you sir....
12th Mar 2018, 7:47 AM
Manjunath M Onarotti
Manjunath M Onarotti - avatar