I'm trying to change the css of a loading via javascript.
The element is as display:none and when I submit change this element to display:block and it appears on the screen.
The issue is that when tested in Mac Safari it just does not work, I've tried changing the class, among other attempts, but it does not work.
Has anyone ever been through this?
Here is the snippet of the code in question: link
Thank you in advance.
Use the methods below:
classList.add () and classList.remove ();
Example:
$('#cadastro_pedido').click(function(){
//document.getElementById('loading').setAttribute( "class", "loadingShow" );
document.getElementById('loading').classList.add("loadingShow");
document.getElementById('loading').classList.remove("loading");
//document.getElementById('loading').style.display = 'block';
var contador = 10;
setInterval(function(){
if(contador < 90){
document.getElementById('testePaulo').innerHTML= contador + '%';
contador += Math.floor((Math.random() * 10) + 1);
}
},1000);
//document.getElementById("formProj").submit();
});.loading{
position: fixed;
z-index: 99;
background: rgba(255,255,255,0.6);
width: 100%;
height: 100%;
display: none;
}
.loadingShow{
position: fixed;
z-index: 99;
background: rgba(255,255,255,0.6);
width: 100%;
height: 100%;
display: block !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="loading" class="loading">
<div style="color:#5fbbfb;font-size: 70px;width: 100%;text-align: center;float: left;position: fixed;top:35%;" id="testePaulo"></div>
</div>
<a href="#" class="btn btn-success" disabled="disabled" id="cadastro_pedido" >Cadastrar Pedido</a>