Sample Unicode based spinner

Toggle class name on click in jQuery

by Vasil Svetoslavov

HTML

<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
  <small style="text-align: left; font-size: 12px;">
  <div id="spinner">
    <span class="spinner-image"></span>
    <span class="state-text"></span>
  </div>
  </small>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 900px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

.state-text {
  margin-left: .5em;
}
.spinner-image {
  font-family: 'Ubuntu';
}

/* #spinner {
  height: 230px;
  width: 230px;
  font-size: 3em;
} */

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

var verbs = ['reading', 'fetching', 'processing', 'iterating', 'cleaning up', 'initializing', 'adjusting', 'configuring', 'updating', 'deploying', 'verifying', 'generating', 'altering', 'managing'];
var subjects = ['states', 'items', 'webservices', 'sockets', 'connections', 'servers', 'endpoints']

// handle click and add class
button.on("click", () => {
  banner.toggleClass("alt")
})

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function generateVerb() {
	var idx = getRandomInt(verbs.length);
  return verbs[idx];
}

function generateSubject() {
	var idx = getRandomInt(subjects.length);
  return subjects[idx];	
}

var spinnerStep = 0;
//var spinnerChars = ['🮠', '🮧', '🮬', '🮮', '🮪', '🮦','🮢','🮤','🮭','🮮','🮬','🮥','🮣','🮦','🮫','🮮','🮭','🮧','🮡','🮥','🮪','🮮','🮫','🮤'];
//var spinnerChars = ['🧑', '🧒', '🧓', '🧔', '🧕', '🧖', '🧗', '🧘', '🧙', '🧚', '🧛', '🧜', '🧝', '🧞', '🧟', '🧠','🧡'];
var spinnerChars ='🬀🬁🬂🬃🬄🬅🬆🬇🬈🬉🬊🬋🬌🬍🬎🬏🬐🬑🬒🬓🬔🬕🬖🬗🬘🬙🬚🬛🬜🬝🬞🬟🬠🬡🬢🬣🬤🬥🬦🬧🬨🬩🬪🬫🬬🬭🬮🬯🬰🬱🬲🬳🬴🬵🬶🬷🬸🬹🬺🬻';
function spin() {
/* 	var spinnerChar = spinnerChars[spinnerStep];
	  var maxStep = spinnerChars.length;
	 */	
  var maxStep = 59;
  var charHex = getRandomInt(maxStep).toString(16);
  if (charHex.length < 2) {
  	charHex = '0' + charHex;
  }
  var spinnerChar = '&#x1FB' + charHex + ';';
	$('#spinner .spinner-image').html(spinnerChar);
  spinnerStep +=1;
  if (spinnerStep >= maxStep) {
  	spinnerStep = 0;
  }
}

function changeText() {
 $('#spinner .state-text').text(generateVerb() + ' ' + generateSubject() + '...');
}
spin();
changeText();
window.setInterval(spin, 300);
window.setInterval(changeText, 300);