JSFiddle - React, Tailwind, and code Playground
HTML
<img id="preloader" src="https://common.olemiss.edu/_images/spinner.gif" alt="Spinner" />
<form method="post" action="/echo/html/">
<label>The text the server will echo back to us.<br />
<input type="text" name="html" value="Server says hi after post" /></label><br />
<br />
<label>Delay in seconds<br />
<input type="text" name="delay" value="5" /></label><br />
<br />
<input type="submit" value="Do form submit with post" />
</form>
CSS
#preloader {
display: none;
}
JavaScript
$("form").bind("submit", onFormSubmit);
function onFormSubmit() {
setTimeout(showSpinner, 1);
}
function showSpinner() {
$("body").append($('<img id="spinner" src="https://common.olemiss.edu/_images/spinner.gif" alt="Please wait..." />'));
}