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 methodspinner('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);
});