During website designing we can make it more impressive by using CSS preloader. During the ajax call preloader can be a important features for monitoring Ajax request. Here, today we cover about pre-loaders which are useful for making a beautiful website design. Most of the websites covered the loading process with many animated preloaders. Some […]
Glowing animated Preloader Design
Hello Coders, hope you all guys are doing well. Today I designed a beautiful animated pre loader which is use for pre loading time animation. Hope you all are like it. See below for Live design. This preloader is designed with only using CSS3 and HTML5, see below code and paste on your code editor […]
Show Preloader Using Jquery
Hello Coders, today i will show you how you can Show Preloader Using jQuery. With click on single link you can show a preloader. Follow code below, Source Code of Show Preloader Using jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ var myVar; //here is a Div ID of the link</strong></span> $( "#myDiv" ).click(function() { myFunction(this); }); //call loader with loader div ID</strong></span> function myFunction(div) { $("#loader").toggle(); $(div).toggle(); setTimeout(function(){ window.location = "https://phpcoder.tech"; }, 3000); } }); </script> </head> <body> <button id="myDiv">Go to Website</button> <div id="loader" style="display:none;padding:150px"> <img src="https://i.pinimg.com/originals/78/e8/26/78e826ca1b9351214dfdd5e47f7e2024.gif" width="250px" height="200px"> </div> </body> </html> |
Copy and paste this code in your code Editor save with .html extension and run on your browser. Code Explanation: […]
