How to Show Loading Spinner in jQuery?

Today, We want to share with you jquery loading spinner example.In this post we will show you Bootstrap Spinners – examples & tutorial, hear for how to add or create ajax loading spinner before send data. we will give you demo and example for implement.In this post, we will learn about Simple spinner on ajax call in jquery with an example.

JQuery AJAX Loading Spinners Tutorial with Examples

index.html

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Ajax Loading Spinner Example - www.pakainfo.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">
        <h2>JQuery Ajax Loading Spinner Example - pakainfo.com</h2>
        <button id='findAllProducts'>Click Here to Get All Products</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="ssc-dual-ring display-none overlay"></div>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

style.css

body {
    background: #ececec;
}

.display-none {
    display: none !important;
}

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

.ssc-dual-ring {
    display: inline-block;
}
.ssc-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: ssc-dual-ring 1.2s linear infinite;
}
@keyframes ssc-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
#findAllProducts{
    background: #e2e222;
    border: 1px solid #e2e222;
    padding:  10px 20px;
}
.text-center{
    text-align: center;
}
#data-table table{
    margin: 20px auto;
}

main.js

$('#findAllProducts').click(function () {
    $.ajax({
        type: "GET",
        url: "https://www.yourdomainname.com/api/get_all_products/",
        dataType: 'json',
        beforeSend: function () {
            $('#loader').removeClass('display-none')
        },
        success: function (data) {
            $('#data-table').removeClass('display-none')
            if (data.length > 0) {
                let productList = "";
                for (let i = 0; i < data.length; i++) {
                    var key = i + 1;
                    productList += ""
                    productList += "" + key + "";
                    productList += "" + data[i].uri + "";
                    productList += ""
                }
                $('#data-table tbody').html(productList);
            }
        },
        complete: function () {
            $('#loader').addClass('display-none')
        },
    });
});

I hope you get an idea about ajax loading spinner using jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.