JSFiddle - React, Tailwind, and code Playground

by Malin Jayakody

HTML

<p class="loader">Loading... <span class="text"></span></p>

JavaScript

jQuery(function($) {
  'use strict';
  var arr = '123456789'.split('');

  var promises = [];
  arr.forEach(function(item) {
    var defer = $.Deferred();
    promises.push(defer.promise());
    $('.text').html(item);
    console.log(item);
    setTimeout(function(item) {
      $('.text').html(item + ' Loaded!');
      console.log(item + ' Loaded!');
      this.resolve();
    }.bind(defer, item), 1000);
  });

  $.when.apply(undefined, promises).always(function() {
    $('.loader').html('Done!');
    console.log('Done!');
  });
});