cpq/spinner.html

## spinner.html
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- jQuery first, then Tether, then Bootstrap JS. -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .btn {
      cursor: pointer;
    }
  </style>
</head>

<body>

  <div class="container" style="margin-top: 10%;">
    <button class="btn btn-large btn-success my-button">
      <i class="fa fa-refresh"></i>
      make ajax request
    </button>
    <div>
      <h3>result:</h3>
      <pre class="alert alert-info result"></pre>
    </div>

  </div>
  </div>


  <script>
    var spin = function (btn) {
      var el = $(btn).attr('orig-class', $(btn).find('.fa').attr('class'));
      el.find('.fa').attr('class', 'fa fa-refresh fa-spin')
      el.prop('disabled', true);
      return el;
    };

    var stopspin = function (btn) {
      $(btn).find('.fa').attr('class', btn.attr('orig-class'));
      $(btn).prop('disabled', false);
    };

    $(document).on('click', '.my-button', function (ev) {
      var btn = spin(ev.target);
      $.ajax({
        url: 'https://httpbin.org/post',
        method: 'POST',
        data: { foo: 1, bar: 2 },
        success: function (resp) {
          $('.result').text(JSON.stringify(resp, null, '  '));
        },
      }).always(function () {
        stopspin(btn);
      });
    });

  </script>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- jQuery first, then Tether, then Bootstrap JS. -->
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
	.btn {
	cursor: pointer;
	}
	</style>
	</head>

	<body>

	<div class="container" style="margin-top: 10%;">
	<button class="btn btn-large btn-success my-button">
	<i class="fa fa-refresh"></i>
	make ajax request
	</button>
	<div>
	<h3>result:</h3>
	<pre class="alert alert-info result"></pre>
	</div>

	</div>
	</div>


	<script>
	var spin = function (btn) {
	var el = $(btn).attr('orig-class', $(btn).find('.fa').attr('class'));
	el.find('.fa').attr('class', 'fa fa-refresh fa-spin')
	el.prop('disabled', true);
	return el;
	};

	var stopspin = function (btn) {
	$(btn).find('.fa').attr('class', btn.attr('orig-class'));
	$(btn).prop('disabled', false);
	};

	$(document).on('click', '.my-button', function (ev) {
	var btn = spin(ev.target);
	$.ajax({
	url: 'https://httpbin.org/post',
	method: 'POST',
	data: { foo: 1, bar: 2 },
	success: function (resp) {
	$('.result').text(JSON.stringify(resp, null, ' '));
	},
	}).always(function () {
	stopspin(btn);
	});
	});

	</script>

	</body>

	</html>