<form action='page.html' method='post'> <input type="text" name="name" placeholder="Enter your name here"> <input type="submit" value="submit"> </form>En este código anterior, después del envío del formulario, habrá aproximadamente 5 segundos de una pantalla de carga o un ícono (el ícono es mejor), luego se redirigirá a page.html. Soy nuevo en el mundo de Web Dev, así que ayúdenme con el parte de codificación. No sé cómo hacerlo usando javascript o jQuery.
Puede usar el ícono giratorio de fuente impresionante, este código mostrará un ícono giratorio debajo del campo de entrada durante 5 segundos. Puedes cambiar su lugar dependiendo de tus necesidades.
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <form action='page.html' method='post' onSubmit="return showSpinner(this);"> <input type="text" name="name" placeholder="Enter your name here"> <input type="submit" value="submit"> </form> <i class="fa fa-spinner fa-pulse" style="font-size:24px;visibility:hidden" id="spinner-icon"></i> <script> const showSpinner = form => { // Display the spinner icon document.getElementById("spinner-icon").style.visibility = "visible"; // Wait 5 seconds then submit form setTimeout(function() { form.submit(); }, 5000); // 5 seconds return false; } </script> </body> </html><form action='page.html' method='post' onsubmit="myFunction()"> <input type="text" name="name" placeholder="Enter your name here"> <input type="submit" value="submit"> </form> <script> function myFunction() { alert("The form was submitted"); } </script>