<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ladeanimation Beispiel</title> <script type="module" src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/quantum.js"></script> <style> body, html { height: 100%; margin: 0; } .loader-container { display: none; justify-content: center; align-items: center; height: 100%; width: 100%; position: fixed; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.8); /* Halbtransparenter milchiger Hintergrund */ z-index: 9999; /* Sicherstellen, dass die Ladeanimation immer im Vordergrund ist */ } /* Ladeanimation anzeigen */ .loading .loader-container { display: flex; } </style> </head> <body> <!-- Ladeanimation --> <div class="loader-container"> <l-quantum size="45" speed="1.75" color="black" ></l-quantum> </div> <!-- Deine anderen Inhalte hier --> <p></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> </html>