JSFiddle - React, Tailwind, and code Playground

HTML

Check your console!

JavaScript

"use strict";

function App() {};

/**
 * @param {Number}   stage
 * @param {Function} callback
 * @method login
 */
App.prototype.login = function(stage, callback) {

  switch (stage) {

    case 0:
      setTimeout(function() {
        console.log("Step 0 completed.");
        this.login(++stage, callback);
      }.bind(this), 250);
    return;

    case 1:
      setTimeout(function() {
        console.log("Step 1 completed.");
        this.login(++stage, callback);
      }.bind(this), 50);
    return;

    case 2:
      setTimeout(function() {
        console.log("Step 2 completed.");
        this.login(++stage, callback);
      }.bind(this), 500);
    return;

    case 3:
      setTimeout(function() {
        console.log("Step 3 completed.");
        this.login(++stage, callback);
      }.bind(this), 1e3);
    return;

  };

  /** Everything finished! Fire the main callback! */
  callback();

};

/**
 * Create a new app and
 * pass in 0 as first param,
 * so we start at step 0
 */
var app = new App().login(0, function() {
  console.log("User logged in!");
});