Estoy llamando una API desde JSON
de esta forma:
$(document).ready(function() {
$('#btn-saldo').on('click', function() {
if (CONDICIÓN)
{
$.ajax({
url: `http://bip-servicio.herokuapp.com/api/v1/solicitudes.json?bip=${numTarjetaSaldo}`,
type: 'GET',
datatype: 'JSON',
})
.done(function(responseTwo) {
var plata = responseTwo.saldoTarjeta;
var fechaPlata = responseTwo.fechaSaldo;
$( "#saldo" ).empty();
$('#saldo').append(
"<div class='nav-saldo'>Saldo:</div>"+
"<div class='header-saldo'>" + plata + "</div>"+
"<div class='nav-saldo '>Saldo a la fecha: </div>"+
"<div class='header-saldo div-nav'>"+ fechaPlata + "</div>");
})
.fail(function() {
$( "#saldo" ).empty();
$('#saldo').append(
"<div class='nav-saldo'>Error</div>"+
"<div class='header-saldo'> Lo sentimos =( <br> El número de tu Bip! no es valida.</div>");
})
}
else
{
$( "#saldo" ).empty();
$('#saldo').append(
"<div class='nav-saldo'>Saldo:</div>"+
"<div class='header-saldo'>" + tarjetaVacia + "</div>");
}
});
Resulta que para .done
se demora como 5 segundos en hacer el llamado a la API y mostrar el resultado, por lo que me gustaría hacer una especie de onLoad
, que muestre un Cargando, pero sé que no se pueden hacer onLoad
sobre un <div>
.
¿Qué solución me recomiendan?