Bootstrap Button Using Jquery

 

Whatever written in data-loading-text attribute will show as button text at the time of loading and the time is also set to do the button again active.

 
 
 
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <button type="button" id="loadingBtn" data-loading-text="Loading Please Wait..." class="btn btn-primary" autocomplete="off"> Click Me </button> </body> </html> <script> $('#loadingBtn').on('click', function () { var btn = $(this).button('loading'); var startTime = new Date().getTime(); var interval = setInterval(function () { if (new Date().getTime() - startTime > 10000) { btn.button('reset'); return; } },5000); }) </script>
Output