Whenever I execute this piece of code;
document.getElementById("loading").style.display = "none"
It unexpectedly hides the div named "myDiv" as well.
By setting MyDiv to block, the text appears correctly. However, when loading is set to none, it strangely removes MyDiv too. What I actually want is for it to only hide the display div.
<head>
<style>
.loading {
position: absolute;
left: 50%;
top: 50%;
margin: -60px 0 0 -60px;
background: #fff;
width: 100px;
height: 100px;
border-radius: 100%;
border: 10px solid #19bee1;
}
.loading:after {
content: '';
background: trasparent;
width: 140%;
height: 140%;
position: absolute;
border-radius: 100%;
top: -20%;
left: -20%;
opacity: 0.7;
box-shadow: rgba(0, 163, 204, 0.6) -4px -5px 3px -3px;
animation: rotate 2s infinite linear;
}
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
</style>
</head>
<div class="loading" id="loading"</div>
<body onload="myFunction()">
<div class="myDiv" id="myDiv" style="display:none;" >
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div>
<script>
var myVar;
var toooa
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("myDiv").style.display = "block"
document.getElementById("loading").style.display = "none"
}
</script>
</body>
</html>