If you are searching like jquery ajax loading spinner example, jquery ajax loading image example, jquery loading spinner overlay, jquery ajax loading image while getting the data, display loading image when ajax call is in progress. So this tutorial is very helpful for you.
In this jQuery Ajax Loading Spinner Example post, we would love to share with you how to add or create ajax loading spinner in your HTML pages or web pages with example.
And if you want to replace the spinner with an image. So you can create a gif image and create a jquery ajax loading image example.
Most of the time we bring data by calling Ajax on the web page. or So sometimes it takes time for the response from the server. Or submit a form on the web page. So as soon as you click on the submit button of the form. And the form is submitted by Ajax. So jquery ajax spinner has to be applied in all these conditions.
This jQuery Ajax spinner tells the user that the request is being processed right now. It has not been completed yet. And whenever the server request completes, the jQuery Ajax spinner is removed.
jQuery Ajax Loading Spinner Example
Follow the steps given below and you can create jQuery Ajax Loading Spinner:
- 1. Create an index.html
- 2. Create One CSS file
- 3. Create one js file
1. Create an index.html
First of all, you need to create one index.html file and update the following code into your file:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Ajax Loading Spinner Example</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<button id='getDataBtn'>Get Data</button>
<div id="richList"></div>
<div id="loader" class="lds-dual-ring hidden overlay"></div>
</body>
</html>
2. Create One CSS file
Next step, you need to create one CSS file and update the following code into your file:
body {
background: #ececec;
}
/*Hidden class for adding and removing*/
.lds-dual-ring.hidden {
display: none;
}
/*Add an overlay to the entire page blocking any further presses to buttons or other elements.*/
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0,0,0,.8);
z-index: 999;
opacity: 1;
transition: all 0.5s;
}
/*Spinner Styles*/
.lds-dual-ring {
display: inline-block;
width: 80px;
height: 80px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 5% auto;
border-radius: 50%;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
3. Create one js file
After that, create a new js file and udpate the following code into your js file:
// Define our button click listener
$('#getDataBtn').click(function () {
// On click, execute the ajax call.
$.ajax({
type: "GET",
url: "https://forbes400.herokuapp.com/api/forbes400?limit=400",
dataType: 'json',
beforeSend: function () { // Before we send the request, remove the .hidden class from the spinner and default to inline-block.
$('#loader').removeClass('hidden')
},
success: function (data) {
// On Success, build our rich list up and append it to the #richList div.
if (data.length > 0) {
let richList = "<ol>";
for (let i = 0; i < data.length; i++) {
console.log(data[i].uri);
richList += "<li>" + data[i].uri + "</li>";
}
richList += "</ol>"
$('#richList').html(richList);
}
},
complete: function () { // Set our complete callback, adding the .hidden class and hiding the spinner.
$('#loader').addClass('hidden')
},
});
});
Next and final step, The css and js file you created earlier. Include both those files in the html page.
You can see it How we have included the css and js file in the html page.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Ajax Loading Spinner Example</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="alternate" href="spinner.css">
</head>
<body>
<button id='getDataBtn'>Get Data</button>
<div id="richList"></div>
<div id="loader" class="lds-dual-ring hidden overlay"></div>
</body>
<script src="spinner.js"></script>
</html>
Conclusion
Here you have learned how to create/add jQuery Ajax Loading Spinner on Html / Web Pages with example.
