GIF not working with form submission in Safari but works in Chrome
I want to run a GIF animation as a loader while a form is being submitted. I have made a very basic form with just a input button which once clicked submits the form and also should get replaced by the GIF.The GIF does not work in Safari but works in Chrome. Client requirement is that the GIF should run in all browsers. Another requirement is that I cannot use AJAX to submit the form as recommended in this answer.
My jQuery
$(document).ready(function(){
$("#myform").on("submit", function(){
$(".UploadBtn").hide();
$("#spinner").show();
$("#img-spinner").show();
});
});
My CSS;
#spinner {
display: none;
font-size: 20px;
font-family: serif;
color: #00C853;
}
#img-spinner {
display: none;
}
.UploadBtn {
display: show;
}
My HTML;
<form id ="myform" action="{% url 'loading_test' %}" method="POST">
<input type="submit" class="UploadBtn">
</form>
<div id="spinner"><img id="img-spinner" src="{{ STATIC_URL }}img/pacman_orange.gif"> loading</div>