Trying to implement a loading screen in my VueJs app using only divs. The issue is that the background color of the divs (loadingScreen) does not cover the entire screen, but only as much as the loader's height. I've attempted adding margin to the body without success.
#ctrl {
position: absolute;
display: block;
text-align: center;
left: 50%;
top: 40%;
}
#loadingScreen {
background-color: rgb(0, 0, 0);
display: block;
z-index: 1;
position: absolute;
}
#loader {
position: relative;
left: -50%;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: inherit;
}
#playPause{
display:none;
}<div id="ctrl">
<div id="playPause">
<img src="../public/pauseButton.png" />
<img src="../public/playButton.png" />
</div>
<div id="loadingScreen">
<div id="loader"></div>
</div>
</div>