jQuery addClass example

Change class name on click in jQuery

by cmacrander

HTML

<button>
  Load It
</button>
<div id="progress-bar" style="display: none">
  Loading
</div>
<div id="results" style="display: none">
  Some fake results
</div>

JavaScript

$('button').click(load);

function load() {
  // Start the animation.
  $('#results').hide();
  $('#progress-bar').show();
  const timeoutHandle = setInterval(incrementProgress, 100);
  
  fakeRequest(function successCallback() {
    // When the request is done...
    
    // 1. Clean up the animation timer.
    clearTimeout(timeoutHandle);
    
    // 2. Display results and hide the animation.
    $('#progress-bar').hide();
    $('#results').show();
  });
}

function incrementProgress() {
  $('#progress-bar').get(0).innerHTML += '.';
}

function fakeRequest(callback) {
  // This doesn't actually load data.
  // Launch your ajax request instead.
  setTimeout(callback, 1000);
}