Spinner

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

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

Sizes

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

Source code
<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 call the plugin method spinner('show') and to hide you just need to call the plugin method spinner('hide').
  • You can also show small information to the user while the app is processing.
Will close after 3 seconds...
Source code
<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> Will close after 3 seconds...
</div>
$('#spinner-toggle').on('click', function () {
  $('#spinner').spinner('show');

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