<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="container"> <div class="row"> <h2 style="text-align:center">Loading Button </h2> <hr/> </div> <br/> <div class="row"> <div class="col-md-1"> <div class="form-group"> <button class="btnAdd btn btn-default btn-xs" name="btnAdd" onclick="buttonLoading(this)" style="border-color:#43A047"> <i class="fa fa-plus-circle" aria-hidden="true" style="color:#43A047"></i> <span style="color:#43A047"> Add</span> </button> </div> </div> <div class="col-md-1"> <div class="form-group"> <button class="btnEdit btn btn-default btn-xs" name="btnEdit" onclick="buttonLoading(this)" style="border-color:#336686"> <i class="fa fa-pencil-square-o" aria-hidden="true" style="color:#336686"></i> <span style="color:#336686"> Edit</span> </button> </div> </div> <div class="col-md-1"> <div class="form-group"> <button class="btnDel btn btn-default btn-xs" name="btnDel" onclick="buttonLoading(this)" style="border-color:#b71c1c"> <i class="fa fa-trash" aria-hidden="true" style="color:#b71c1c"></i> <span style="color:#b71c1c"> Del</span> </button> </div> </div> </div> </div>

let className = ""; let iconName = ""; // Start loading on specified button function iniciaButtonLoading(botao) { //Get the components of the specified button className = "." + botao.name; iconName = botao.firstElementChild.className; //Through the captured components adds the icon loading and removes the default icon + disables the button $(className + " i").removeClass(iconName).addClass("fa fa-circle-o-notch fa-spin"); $(className).prop("disabled", true); } //End loading on specified button function finalizaButtonLoading(botao) { //Using the components captured in the previous function removes the icon loading and adds the default icon + enables the button $(className + " i").removeClass("fa fa-circle-o-notch fa-spin").addClass(iconName); $(className).prop("disabled", false); } function buttonLoading(button){ iniciaButtonLoading(button); setTimeout(function(){ finalizaButtonLoading(button) },3000 ); }