Solución:
Debe agregar Bootstrap 4.2.1 para este código mientras usa 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>
Parece que el CSS giratorio no está presente en la biblioteca CSS cargada. Pruebe los siguientes códigos
En 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;
}
En 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...`
);
});
});
Pluma de código
¿Podrías intentar agregar [In head] Lo agregué funcionó en su codepen
<link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
y esto
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)