JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<script src="https://iris.alkamitech.com/cdn/iris/1.21.1/iris.min.js"></script>
<link rel="stylesheet" href="https://iris.alkamitech.com/cdn/iris/1.21.1/iris.min.css">
<button id="toggle" class="iris-button iris-button--primary bg-color--positive mar-y--lg">
  <span class="iris-loading mar-right--md font-color--light hidden" data-size="small" role="progressbar" aria-valuemin="" aria-valuemax="" aria-valuetext="Loading positive color inherited from parent.">
    <svg class="iris-loading-svg" viewBox="25 25 50 50">
      <circle class="iris-loading-path" cx="50" cy="50" r="20" />
    </svg>
  </span>
  <span class="iris-button__text font-color--light">click me</span>
</button>

CSS

.hidden {
  display: none !important;
}

JavaScript

console.clear();

let toggle = document.querySelector('#toggle');

toggle.addEventListener('click', function () {
	let spinner = this.querySelector('.iris-loading');
	let text = this.querySelector('.iris-button__text');
  
  spinner.classList.remove('hidden');
  text.innerText = 'loading...';
  
  window.setTimeout(function () {
  	spinner.classList.add('hidden');
  	text.innerText = 'click me';
  }, 5000);
});