Hallo, ich versuche mich grade an einem Preloader... ich hab nen soweit schönen gefunden und spiele daran herum um zu verstehen wie es funktioniert... der preloader ist in position absolute... jedoch wenn ich versuche es gegen einen hohen z-index zu tauschen funktioniert es nichtmehr... wieso ? :O
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div class="content">
<img src="https://picsum.photos/200/300">
</div>
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(window).on("load",function(){
$(".loader-wrapper").fadeOut("slow");
});
</script>
</body>
</html>
Alles anzeigen
CSS
Code
body {
margin: 0;
padding: 0;
width:100vw;
height: 100vh;
background-color: #eee;
}
.content {
display: flex;
justify-content: center;
align-items: center;
width:100%;
height:100%;
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: hotpink;
display:flex;
justify-content: center;
align-items: center;
}
.loader {
display: inline-block;
width: 80px;
height: 80px;
position: relative;
border: 4px solid yellow;
animation: loader 4s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: yellow;
animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
0% { transform: rotate(0deg);}
25% { transform: rotate(180deg);}
50% { transform: rotate(180deg);}
75% { transform: rotate(360deg);}
100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
0% { height: 0%;}
25% { height: 0%;}
50% { height: 100%;}
75% { height: 100%;}
100% { height: 0%;}
}
Alles anzeigen
ändere ich das so um funktionert es nichtmehr
Code
body {
margin: 0;
padding: 0;
width:100vw;
height: 100vh;
background-color: #eee;
}
.content {
display: flex;
justify-content: center;
align-items: center;
width:100%;
height:100%;
}
.loader-wrapper {
width: 100%;
height: 100%;
/* position: absolute; */
top: 0;
left: 0;
background-color: hotpink;
display:flex;
justify-content: center;
align-items: center;
z-index: 99999;
Alles anzeigen
Den Rest habe ich nicht geändert