1

Estimada comunidad, deseo ejecutar un spinner (cargando) con un código JS dentro de un HTML al momento de presionar un botón.

La idea es simple, que muestre un spinner cargando mientras la página está cargando pero no logro llegar a aquello.

Dejo un poco de código.

<button onclick="dirigir()" type="submit" class="btn btn-primary">Descargar Tabla</button>
<script>
  function dirigir() {
    window.onload(function() {
      $("#loader").slideDown();
    });
  };
</script>

Ese script está dentro del HTML, la idea es que al presionar el botón con el onClick="dirigir()" ejecute ese trozo de código, la función window.onload.

Por lo que estuve investigando ejecuta un código mientras se está cargando la página, y es ahí dentro en donde agrego el spinner $("#loader").slideDown(); pero no funciona.

Espero puedan ayudarme, muchas gracias comunidad!!!

2
  • Prueba quitando el window.onload -> function dirigir() { $("#loader").slideDown(); } el 10 abr. a las 17:07
  • @Cris223511.dev si también lo hice así y muestra el spinner pero todo el rato, aún cuando deja de cargar la página, es por eso que le he agregado el window.onload, y hay una corrección, es window.onload = function....
    – Emerson
    el 10 abr. a las 17:09

1 respuesta 1

1

Por lo que entiendo, buscas mostrar un spinner al hacer click en el botón y que se oculte una vez cargados los datos de la tabla.

Para ello creé un spinner básico con CSS. Este spinner debe estar oculto por defecto. Y con setTimeout estoy simulando la finalización de la carga.

#loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  display: none; /* El spinner debe estar oculto por defecto */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="dirigir()" type="submit" class="btn btn-primary">Descargar Tabla</button>
<br><br>
<div id="loader"></div>
<div id="tabla"></div>
<script>
  function dirigir() {
    //Al hacer click en el botón se muestra el spinner
    $("#loader").show("slow");
    //En cinco segundos se oculta el spinner y se muestra la tabla
    setTimeout(() => {
      $("#loader").hide("slow");
      $("#tabla").html('<table border="1"><tr><td>1</td><td>2</td></tr></table>');
    }, "5000");
  };
</script>

Deja un comentario o agrega más detalles a la pregunta si no es lo que buscas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.