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
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>
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"));
}
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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With