jQuery Ajax Loading Spinner

jQuery ajax loading spinner; Through this tutorial, i am going to show you how to create loading spinner n html page or web page using jQuery ajax.

jQuery Ajax Loading Spinner Example

1. Create an index.html
2. Implement CSS For Ajax Loading Spinner
3. Implement jQuery Ajax Code For Loading Spinner

1. Create an index.html

Create one index.html file and add 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. Implement CSS For Ajax Loading Spinner

Create one CSS file and implement css for ajax loading spinner. And 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. Implement jQuery Ajax Code For Loading Spinner

Create a new js file and inside this file implement jQuery ajax code for loading spinner; as shown below:

// 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')
            },
        });
    });

Full source code of jquery ajax loading spinner example; as shown below:

<!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

jQuery ajax loading spinner; Through this tutorial, You have learned how to create loading spinner n html page or web page using jQuery ajax.

jQuery Ajax Loading Spinner