How to hide loader after elements under a div tag are fully loaded

Question

Whenever I click a load-more button, I wanna show a loader. If everything from the load-more feature is loaded under a div tag, I wanna hide the loader.

I've done some research about it, but they didn't really help. This is what I've done so far. Can anyone help about this?

Javascript

$('.load-more-btn').on('click', function() {
    var spinner = $('.spinner')
    var loadBtn = $(this)

    spinner.removeAttr('hidden')
    loadBtn.hide()

    if ($('.wrapper-children').length > 0) {
      loadBtn.delay(1000).show(0)
      spinner.hide()
    }

  })

HTML

<div class="wrapper-children">
  <!-- Additional contents by Ajax will come here -->
  <div class="spinner" hidden>
    <span class="inner"></span>
    <span class="inner"></span>
    <span class="inner"></span>
  </div>
</div>

<div class="...">
  <a class="load-more-btn">View More</a>
</div>

Answer 1

This is the way I did it

Used setTimeout() since I use it for its callback. Alternative would be to use delay(1000).queue() .

Load this .gif using CSS .

If using $.ajax() , you would disable the gif on success: function(){}

 $('.load-more-btn').on('click', function() { $('.spinner').css('visibility', 'visible'); $(this).hide() if ($('.wrapper-children').length > 0) { $(this).hide(); // setTimeout is global and supports callbacks // () => {} is an arrow-function setTimeout(() => { $(this).show(); $('.spinner').css('visibility', 'hidden') }, 1000); } }) 

 .spinner { content: ' '; background: transparent url('https://www.bikearena-bender.de/.resources/bulls-templating/img/system/preloader.gif') center no-repeat ; background-size : auto 100%; width: 30px; height: 30px; position: absolute; visibility: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper-children"> <!-- Additional contents by Ajax will come here --> <div class="myContainer"> <div class="spinner"></div> <span class="inner"></span> <span class="inner"></span> <span class="inner"></span> </div> </div> <div class="..."> <a class="load-more-btn">View More</a> </div> 

Answer 2

Try this way

Javascript

$('.load-more-btn').on('click', function() {
    var spinner = $('.spinner')
    var loadBtn = $(this)

    spinner.removeAttr('hidden')
    loadBtn.hide()

    if ($('.wrapper-children .dynamic-content').length > 0) {
      loadBtn.delay(1000).show(0)
      spinner.hide()
    }

  })

HTML

<div class="wrapper-children">
  <!-- Additional contents by Ajax will come here-->
  <div class=“dynamic-content”>I’m loaded by ajax</div>
  <div class=“dynamic-content”>I’m loaded by ajax too</div>
  <div class=“dynamic-content”>These ‘dynamic-content’ divs won’t exist if they aren’t being loaded by ajax</div>
  <div class="spinner" hidden>
    <span class="inner"></span>
    <span class="inner"></span>
    <span class="inner"></span>
  </div>
</div>

<div class="...">
  <a class="load-more-btn">View More</a>
</div>