Bootstrap 4 Loading Spinner in button

Question

I'm trying to implement the bootstrap 4 loading spinner in button as in Bootstrap Spinners .

Below is what I'm doing in code

my.html

<form class="form-inline" id="topicForm" action="" method="POST">
  <input type="text" id="inputTopic" name="topic" class="form-control mb-2 mr-sm-2" placeholder="Topic of interest" required autofocus/>
  <button type="button" id="btnFetch" class="btn btn-primary mb-2">Submit</button>
</form>

my.js

$(document).ready(function() {
    $("#btnFetch").click(function() {
      // load data via AJAX
      fetch_data($("#inputTopic").val());
      // disable button
      $(this).prop("disabled", true);
      // add spinner to button
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...`
      );
    });
});

This works except that the spinner as shown in bootstrap doc is not showing up. The button text is changing to Loading... as expected. Wanted to know what is that I'm not doing right to the spinner inside the button.

Code Pen here

Answer 1

You have to add Bootstrap 4.2.1 for this code while you are using 4.0

 $(document).ready(function() { $("#btnFetch").click(function() { // disable button $(this).prop("disabled", true); // add spinner to button $(this).html( `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...` ); }); });

 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <div style="margin:3em;"> <form class="form-inline" id="topicForm" action="" method="POST"> <input type="text" id="inputTopic" name="topic" class="form-control mb-2 mr-sm-2" placeholder="Topic of interest" required autofocus/> <button type="button" id="btnFetch" class="btn btn-primary mb-2">Submit</button> </form> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Answer 2

It seems like spinner CSS is not present in the loaded CSS library. Please try below codes

In CSS

    @keyframes spinner-border {
      to { transform: rotate(360deg); }
    } 
    .spinner-border{
        display: inline-block;
        width: 2rem;
        height: 2rem;
        vertical-align: text-bottom;
        border: .25em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner-border .75s linear infinite;
        animation: spinner-border .75s linear infinite;
    }
    .spinner-border-sm{
        height: 1rem;
        border-width: .2em;
    }

In JS

$(document).ready(function() {
    $("#btnFetch").click(function() {
      $(this).prop("disabled", true);
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loadingg...`
      );
    });
});

Code Pen

Answer 3

This works for me. It stores the original text/html as an attribute & restores it from there.

    $(document).ready(function() {
        $("#btnFetch").click(function() {
           var $this = $(this);
           
           //Call Button Loading Function
           BtnLoading($this);
    
           //Call Button Reset Function after AJAX or your code execution
           BtnReset($this);
        });
    });
    
    function BtnLoading(elem) {
        $(elem).attr("data-original-text", $(elem).html());
        $(elem).prop("disabled", true);
        $(elem).html('<i class="spinner-border spinner-border-sm"></i> Loading...');
    }
    
    function BtnReset(elem) {
        $(elem).prop("disabled", false);
        $(elem).html($(elem).attr("data-original-text"));
    }

Answer 4

Could you Try Adding [In head] I added It Worked in your codepen

  <link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

and this

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Answer 5

Modifying Vinay's Answer to work in my case I simply store the text instead of the html as my original button was being modified on reset.

function btnLoading(elem) {
    $(elem).attr("data-original-text", $(elem).text()); // <-use .text() instead of .html()
    $(elem).prop("disabled", true);
    $(elem).html('<span class="spinner-border spinner-border-sm align-middle" aria-hidden="true" role="status"></span> loading...');
}

function btnReset(elem) {
    $(elem).prop("disabled", false);
    $(elem).text($(elem).attr("data-original-text"));
}