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

<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://codingtasks.net";
}, 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>

<html>

<head>

$(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://codingtasks.net";

}, 3000);

}

});

</script>

</head>

<body>

<button id="myDiv">Go to Website</button>

</div>

</body>

</html>

Copy and paste this code in your code Editor save with .html extension and run on your browser.

Code Explanation:

Here we first include the jQuery CDN.
Create a HTML button where we click to shows the loader.
Set the loader image on HTML div.
Create a function where toggle the loader div and set the timeout time using setTimeout() function to show preloader and then open website.

Your result look like this, but you can change .gif according to yourself.

Also Check:

Happy Coding..!

Was this article helpful?

YesNo

Show Preloader Using Jquery

Source Code of Show Preloader Using jQuery

Written by Bikash

How To Stop Auto Page Refresh Using JavaScript

5 Most Effective Ways To Optimize PHP Code

Debugging in PHP: A Comprehensive Guide with Examples

Leave a Reply Cancel reply