Display Loading State In Bootstrap 4 Buttons - Button-Loader

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).

<link rel="stylesheet" href="/path/to/fontawesome/version/css/all.css" />

2. Load the main JavaScript button-inline-loader.js after jQuery.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<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.

<button class="btn btn-primary button-loader" 
        data-loading-text="<i class='fa fa-spinner fa-spin'></i> Loading..." 
        type="submit">
        Button Loader
</button

4. Start the inline loader and disable the button during process.

$('.button-loader').button('loading');

5. Reset the button.

$('.button-loader').button('reset');

6. Integrate the plugin into AJAX requests.

$.ajax({
  beforeSend: function() {
    $('.button-loader').button('loading');
  },
  complete: function() {
    $('.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.