JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/joseshiru/p-loading/master/src/css/p-loading.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/joseshiru/pl-spinkit/master/src/css/pl-spinkit.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://rawgit.com/joseshiru/p-loading/master/src/js/p-loading.js"></script>
<script src="https://cdn.rawgit.com/joseshiru/pl-spinkit/master/src/js/pl-spinkit.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/tobiasahlin/SpinKit/master/css/spinkit.css">
<div class="square panel">
  <div class="row">
    <h2>
      Login
    </h2>
    <div class="col-xs-12">
      <input type="text" placeholder="Username"/>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <input type="text" placeholder="password"/>
    </div>
  </div>
  
  
</div>

<button id="default">
Default - rotatingPlane
</button>

<button id="wave">
Waves
</button>

<button id="chasingdots">
ChasingDots
</button>


<button id="hide">
Hide
</button>

CSS

.square {
  width: 200px;
  height: 200px;
  margin: 40px;
  background-color: #cdcdcd;
  text-align: center;
  color: #666666;
}

JavaScript

//First let's change the default spinner to the Wave spinner (of the Spinkit)
$.fn.ploading.defaults = {
    useAddOns: ['plspinkit'],//we are calling the pl-spinkit by default
    spinner: 'rotatingPlane', //we are defining the rotatingPlane spinner as default,
    maskColor: 'rgba(234, 234, 234, 0.6)' //Change the mask color background to white as the spinners colors is black
};



$('#hide').on('click', function() {
	//Hide the spinner	
  $('.square').ploading({
    action: 'hide'
  })

})

$('#default').on('click', function() {
	//We don't need to define the spinner anymore because it's already defined
  //in the default options
  $('.square').ploading({
    action: 'show'
  })

})

$('#wave').on('click', function() {
	//We can display another spinner
  //note: this will be set as default spinner
  //only will replace the current displayed spinner.
  $('.square').ploading({
    action: 'show', 
    spinner: 'wave'
  })

})

$('#chasingdots').on('click', function() {

  $('.square').ploading({
    action: 'show', 
    spinner: 'chasingDots'
  })

})

/* Check the availables spinners here:

https://github.com/joseshiru/pl-spinkit/blob/master/DOCUMENTATION.md#spinners-names

*/