JQuery Ajax Loading Spinner Example

Jquery

Nicesnippets

22891

12-11-2020


JQuery Ajax Loading Spinner Example

Hi Dev,

In this article, i would like to share with you jquery ajax loading spinner example. We will talk about how to add or create ajax loading spinner before send data. This tutorial will give you ajax loading spinner using jquery.

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. We will add spinner before get data in ajax.

Here i will give you full example for jquery ajax loading spinner example. So let's see bellow example:

Create index.html


In this step you can create index.html file and put the bellow code:

<!DOCTYPE html>

<html>

<head>

<title>JQuery Ajax Loading Spinner Example - NiceSnippets.com</title>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="text-center">

<h1>JQuery Ajax Loading Spinner Example - NiceSnipets.com</h1>

<button id='getDataBtn'>Click Here to Get Data</button>

</div>

<div id="data-table" style="width: 100%;" class="display-none">

<table border="2">

<thead>

<tr>

<th>No.</th>

<th>Name</th>

</tr>

</thead>

<tbody></tbody>

</table>

</div>

<div id="loader" class="lds-dual-ring display-none overlay"></div>

<script type="text/javascript" src="custom.js"></script>

</body>

</html>

Create style.css

body {

background: #ececec;

}

/*Hidden class for adding and removing*/

.display-none {

display: none !important;

}

/*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;

}

.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);

}

}

#getDataBtn{

background: #e2e222;

border: 1px solid #e2e222;

padding: 10px 20px;

}

.text-center{

text-align: center;

}

#data-table table{

margin: 20px auto;

}

Create custom.js

$('#getDataBtn').click(function () {

$.ajax({

type: "GET",

url: "https://forbes400.herokuapp.com/api/forbes400/",

dataType: 'json',

beforeSend: function () {

$('#loader').removeClass('display-none')

},

success: function (data) {

$('#data-table').removeClass('display-none')

if (data.length > 0) {

let richList = "";

for (let i = 0; i < data.length; i++) {

var key = i + 1;

richList += ""

richList += "" + key + "";

richList += "" + data[i].uri + "";

richList += ""

}

$('#data-table tbody').html(richList);

}

},

complete: function () {

$('#loader').addClass('display-none')

},

});

});

It will help you...


Recommended Posts