Site Admin
Site Admin Founder of MeaningArticles
64 Views

JQuery Ajax Loading Spinner

Hello Dev.

In this article, i would really like to share with you jquery ajax loading spinner instance. we are able to communicate about how to add or create ajax loading spinner before send data. This educational will give you ajax loading spinner the usage of jquery.

in case you need to update the spinner with an picture. so you can create a gif picture and create a jquery ajax loading picture instance. 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 - meaningarticles.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 - meaningarticles.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')
        },
    });
});

i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.