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>


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>


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.
Will close after 3 seconds...
Source code
<button id="spinner-toggle" type="button" class="btn btn-primary">
  Start processing

<div id="spinner" class="spinner spinner-block">
  <div class="spinner-bar"></div>
  <div class="spinner-text">Will close after 3 seconds...</div>
$('#spinner-toggle').on('click', function () {

  setTimeout(function () {
  }, 3000);