twirlTimer

twirlTimer.css

.block {
  text-align: center;
}
.spinner {
  padding: 15px 0;
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
}

.spinner[data-phase="1"] {
  color: #6ca8dc;
}
.spinner[data-phase="2"] {
  color: #32f39a;
}
.spinner[data-phase="3"] {
  color: #ffd800;
}
.spinner[data-phase="4"] {
  color: #db2d20;
}

twirlTimer.js

/** start a text-based UTF8 symbols spinner
 * @param selector - string or DOM object
 * @param style - number (int) in 0-4 to select spinner style
 */
var twirlTimer = (function(selector, style) {
  if (!selector) {
    return;
  }
  var div;
  if (typeof selector === "string") {
    div = document.querySelector(selector);
  } else {
    div = selector;
  }
  if (typeof style === "undefined") {
    style = 3;
  }

  var styles_patterns = [
    [" : ", " / ", "· ·", " \\ "],
    ["▴", "▸", "▾", "◂"],
    ["◐", "◓", "◑", "◒"],
    ["◜", "◝", "◞", "◟"],
    ["◴", "◵", "◶", "◷"]];
  var P = styles_patterns[style];
  var x = 0;
  return setInterval(function() {
    div.innerHTML = P[x++];
    div.setAttribute("data-phase", x);
    x &= 3;
  }, 150);
});


/** usage:
 * twirlTimer(".spinner", 0);
 */
// originally http://stackoverflow.com/a/34848607/753451