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.

Recommended jQuery Tutorial

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *