neu
This commit is contained in:
parent
ed19ae5514
commit
929e62d420
23
laden.html
23
laden.html
@ -9,13 +9,10 @@
|
|||||||
body, html {
|
body, html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.loader-container {
|
.loader-container {
|
||||||
display: flex;
|
display: none;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -23,9 +20,14 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background-color: rgba(255, 255, 255, 0.8); /* Optional: Ein halbtransparenter Hintergrund */
|
background-color: rgba(255, 255, 255, 0.8); /* Halbtransparenter milchiger Hintergrund */
|
||||||
z-index: 9999; /* Sicherstellen, dass die Ladeanimation immer im Vordergrund ist */
|
z-index: 9999; /* Sicherstellen, dass die Ladeanimation immer im Vordergrund ist */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Ladeanimation anzeigen */
|
||||||
|
.loading .loader-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -39,6 +41,17 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Deine anderen Inhalte hier -->
|
<!-- Deine anderen Inhalte hier -->
|
||||||
|
<p>Hier ist dein Hauptinhalt...</p>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Simulieren des Ladevorgangs
|
||||||
|
document.body.classList.add('loading');
|
||||||
|
|
||||||
|
// Nach 3 Sekunden den Ladevorgang beenden
|
||||||
|
setTimeout(() => {
|
||||||
|
document.body.classList.remove('loading');
|
||||||
|
}, 3000);
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user