Show Loading.. using jquery in bootstrap 4 with data-loading-text [duplicate]
I'm not sure the .button() method in Bootstrap v4 has the options you are trying to use. The Codepen you link to uses Bootstrap v3.
Here is how you could replicate the same behavior with Bootstrap 4.
$(document).ready(function() { $('.btn').on('click', function() { var $this = $(this); var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> loading...'; if ($(this).html() !== loadingText) { $this.data('original-text', $(this).html()); $this.html(loadingText); } setTimeout(function() { $this.html($this.data('original-text')); }, 2000); });})<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script><div> <button type="button" class="btn btn-primary btn-lg">Submit Order</button></div>
Ran into this same issue a few days ago and nobody seems to have a solution. So here's my jQuery plugin that seems to provide the same behavior in Boostrap 4.
(function($) { $.fn.__bs4_btn = $.fn.button; $.fn.button = function(action) { if (action === 'loading' && this.data('loading-text')) { this.data('original-text', this.html()).html(this.data('loading-text')).prop('disabled', true); } if (action === 'reset' && this.data('original-text')) { this.html(this.data('original-text')).prop('disabled', false); } return this.__bs4_btn(action); };}(jQuery));More details: How to Continue Using Buttons with “data-loading-text” in Bootstrap 4 with jQuery (my blog)