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




    JQuery Ajax Loading Spinner Example - www.pakainfo.com
      
    


    

JQuery Ajax Loading Spinner Example - pakainfo.com

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.

Leave a Comment