This time I will share jQuery Plugin and tutorial about Display Loading State In Bootstrap 4 Buttons – Button-Loader, hope it will help you in programming stack.
Since the Stateful feature is deprecated since Bootstrap v3.3.5 and has been removed in v4, you might need a 3rd plugin to achieve it.
Button-Loader is a small jQuery plugin to create Stateful Buttons that display an inline loader inside Bootstrap 4 buttons to show the state of processes like AJAX requests.
How to use it:
1. Load an Iconic Font for the loading spinner (Font Awesome in this example).
1 |
<link rel="stylesheet" href="/path/to/fontawesome/version/css/all.css" /> |
2. Load the main JavaScript button-inline-loader.js after jQuery.
1 |
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> |
2 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
3 |
<script src="button-inline-loader.js"></script> |
3. Add the data-loading-text to a button and specify the loading content when the Stateful feature is activated.
1 |
<button class="btn btn-primary button-loader" |
2 |
data-loading-text="<i class='fa fa-spinner fa-spin'></i> Loading..." |
4. Start the inline loader and disable the button during process.
1 |
$('.button-loader').button('loading'); |
5. Reset the button.
1 |
$('.button-loader').button('reset'); |
6. Integrate the plugin into AJAX requests.
2 |
beforeSend: function() { |
3 |
$('.button-loader').button('loading'); |
6 |
$('.button-loader').button('reset'); |
This awesome jQuery plugin is developed by thejoker-dev. For more Advanced Usages, please check the demo page or visit the official website.
