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