We need to show a spinner when clicking a button. Our theme (the7) has some classes that show a beautiful spinner.

So, at the beginning of the site, we have set this :

<style type="text/css">.load-wrap{visibility:hidden;opacity:0;}</style>

and onclick button event, we have set this :

onclick = "var x = document.getElementsByClassName('load-wrap');
var i;
for (i = 0; i < x.length; i++){
  x[i].style.opacity='0.9';
  x[i].style.visibility='visible';
  x[i].style.display='flex';
}
if(document.getElementById('load')!== null){
  document.getElementById('load').style.visibility='visible';
  document.getElementById('load').style.display='block';
  document.getElementById('load').style.opacity='0.98';
}
document.form.submit();"

It works perfectly on Chrome and Firefox, but on Safari the spinner gets freeze. I've read that it is because after submitting a form, Safari pauses the spinner animation.

Any help with this behavior on Safari? How could we solve it?