Posted injQuery / JavaScript

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

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

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype