CODEWITHSUNDEEP
jqueryhtml
iceiceicy
iceiceicy

Reputation: 744

Show loading spinner using jquery while waiting for load events finish

I created a ul that contains several links to other page. Then, I used jQuery to only load .products-grid class container when all the links are click. With this, no page reload happen, and only the content inside the .products-grid are shown.

It's working perfectly. But, how do I add a loading spinner while waiting for the content to be shown. Because, the contents are not shown immediately, so I would like to show the loading spinner first for a better ux.

Here's the HTML code for the ul

<div class="tagcloud">
  <ul class="tag-widget">
    <li>
    <a href="http://iceiceicy.com/wingwah/">All Watches</a>
    </li>
    <li>
    <a href="http://iceiceicy.com/wingwah/product-tag/general-sport/">General 
Sport</a>
    </li>
    <li>
    <a href="http://iceiceicy.com/wingwah/product- 
tag/chronograph/">Chronograph</a>
    </li>
    <li>
    <a href="http://iceiceicy.com/wingwah/product-tag/military/">Military</a>
    </li>
  </ul> 
</div>

Here's the jquery

jQuery(document).ready(function( $ ){
  $('.tag-widget a').click(event => {
    event.preventDefault()
    $('.products-grid').load(`${event.target.href} .products-grid`)
  })
});

I found this method, but have no idea where/how to use it or is it practically correct to be implemented to the jquery above.

var $loading = $('#loadingDiv').hide();
$(document).ajaxStart(function () {
  $loading.show();
})
.ajaxStop(function () {
  $loading.hide();
});

Upvotes: 0

Views: 713

Answers (1)

Liftoff
Liftoff

Reputation: 25412

//Show your loading spinner here
$(".loading-spinner").show();

$('.products-grid').load(`${event.target.href} .products-grid`, function(){
    //Hide your loading spinner here
    $(".loading-spinner").hide();
});

Upvotes: 1

Related Questions