更改引导加载按钮文本

Question

I've been trying to get a loading button going where a bootstrap refresh glyphicon keeps rotating until the server has responded to my request. This is the button:

<button type="submit" id="loading" name="loading" class="btn btn-lg btn-default" 
onclick="change()" style="margin-top:40px; margin-bottom:25px;">
span id="state"></span>Submit</button>

When i click the button, the glyphicon to the left of the button starts rotating, that part is working so far. The text to the right of the button (now: Submit) needs to change to "Loading". So far I've got the following script:

<script type="text/javascript">
    function submit() {
        document.getElementById("loading").click();
    }
    function change() { 
        var mybutton = document.getElementById("loading");
        var mystring1 = document.getElementById("input_ipaddress").value;
        var mystring2 = document.getElementById("input_hostname").value;
        var mystring3 = document.getElementById("input_comms").value;
        if (mystring1 && mystring2 && mystring3) {
            document.getElementById("state").className = "glyphicon glyphicon-refresh glyphicon-refresh-animate";   
            mybutton.innerHTML = "Loading...";
        }       
    }
    // remove all classes of the "state" span class
    window.onload = function() {
        document.getElementById('state').className = "";
    };
</script>

The CSS, if this helps resolving my issue:

.glyphicon-refresh-animate {
-animation: spin .7s infinite linear;
-webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}

I've been trying innerHTML, but that of course replaces everything (including the glyphicon) with given text. How can i solve this?

Answer 1

Problem is your new text Loading.. is overlapping glyphicon .

Try this:

mybutton.innerHTML = '<span id="state"></span>Loading..'

Answer 2

You can also use;

<button type="button" class="btn btn-primary btn-lg" 
   data-loading-text="<i class='fa fa-spinner fa-spin'></i> Processing">
   <i class="fa fa-arrow-down"></i>&nbsp;Download
</button>

$('.btn').on('click', function() {
   var $this = $(this);
   $this.button('loading');
   setTimeout(function() {
      $this.button('reset');
   }, 8000);
});

Source: @ codepen