I’m trying to make some text appear after an “artificial” loading screen. I tried using z-index to stack the loading screen on top of the text, so after it fades out you can see the text behind it, however said text doesn’t stack and just appears next to it as it loads. How can I fix this?
<style>
.frontpage {
background-color: black;
position: relative
top: 45%;
left: 50%;
height: 100vh;
z-index: 10;
animation: fadeout 3s linear forwards;
animation-delay: 5s;
}
h1 {
font-size: 40px;
font-family: "Lucida Console";
color: white ;
text-align: center;
}
.loader {
position: absolute;
left: 45%;
top: 45%;
border: 16px solid #f3f3f3;
border-top: 16px solid #9245ff;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite; }
.mainpage {
position: absolute;
z-index: 9;
}
</style>
<head>
<div class="frontpage">
<div class="loader"> </div>
</div>
<div class="mainpage">
<h1>Test Title</h1>
</div>
</head>
New contributor
sage is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.