Spinner

Spinners enables you to tell the users that the app is currently processing. See a basic example below:

<div class="spinner">
  <div class="spinner-bar"></div>
</div>

Sizes

Add .spinner-sm for smaller spinners or .spinner-lg for larger.

<div class="spinner spinner-sm"></div>
<div class="spinner"></div>
<div class="spinner spinner-lg"></div>

Blocker

You can block user interaction to the app by using a blocker spinner.

How it works:

• To make the spinner full screen and block the interaction of the user to the app you need to add the class .spinner-block to .spinner.
• To show the spinner you just need to add the class .show to .spinner and to hide you just need to remove this class.
• You can also show small information to the user while the app is processing by using the class .spinner-text.

<button id="spinner-toggle" type="button" class="btn btn-primary">
  Start processing
</button>

<div id="spinner" class="spinner spinner-block">
  <div class="spinner-bar"></div>
  <div class="spinner-text">Will close after 3 seconds...</div>
</div>

$('#spinner-toggle').on('click', function () {
  $('#spinner').addClass('show');

  setTimeout(function () {
    $('#spinner').removeClass('show');
  }, 3000);
});