cli-spinners

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/font-hack/2.020/css/hack-extended.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

SCSS

body {
  font-family: 'Hack', monospace;
  font-size: 24px;
}

td {
  padding: 10px;
  &:first-child {
    text-align: right;
  }
  &:last-child {
    white-space: pre;
  }
}

JavaScript

$.getJSON('https://rawgit.com/sindresorhus/cli-spinners/master/spinners.json', function(data) {
  var table = $('<table/>');
  $.each(data, function(name, spinner) {
    var frame = 0;
    var row = $('<tr/>');
    var spinnerCell = $('<td/>').text(spinner.frames[frame]);
    row.append($('<td/>').text(name));
    row.append(spinnerCell);
    table.append(row);

    setInterval(function() {
      frame = (frame+1)%spinner.frames.length;
      spinnerCell.text(spinner.frames[frame]);
    }, spinner.interval);
  });
  $('body').append(table);
});