JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
<button class="btn btn-primary">
  Add to cart <span id="load-icon"></span>
</button>

CSS

body {
  background: #f8f9fa;
  margin: 20px;
}

.spinning {
  -webkit-animation: spin 1s steps(8, end) infinite;
          animation: spin 1s steps(8, end) infinite;
}

@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

JavaScript

$('button').on('click', function (e) {
	var Button = $(this);
	var Loader = $('#load-icon');
  
  /* Before the 'add to cart' AJAX request */
	Button.prop('disabled', true);
  Loader.append('<i class="fas fa-spinner spinning"></i>');
  
  /* After AJAX finish */
  setTimeout(function () {
    Button.prop('disabled', false);
  	Loader.empty();
    alert('The AJAX request completed!, redirect me to cart :)');
  }, 2000);
});