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 - pakainfo.com
        Click Here to Get All Products
    
    

        

            

                

                    
No.
                    
Name
                
            
            

        
    
    

    

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.