64 lines
1.7 KiB
HTML
64 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Enable/Disable Element with Loader</title>
|
|
<style>
|
|
/* Reset default margins and padding */
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden; /* prevent scrolling */
|
|
background-color: rgba(0, 0, 255, 0); /* body background */
|
|
}
|
|
|
|
/* Loader container covers full viewport */
|
|
#loader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(127, 255, 212, 0);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="loader">
|
|
<script>
|
|
function getQueryParam(key, defaultValue = 0) {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const value = urlParams.get(key);
|
|
return value !== null ? value : defaultValue;
|
|
}
|
|
|
|
const show_background = getQueryParam('width_height', 0);
|
|
const loader = document.getElementById('loader');
|
|
if (show_background != 0) {
|
|
loader.style.width = show_background + 'px';
|
|
loader.style.height = show_background + 'px';
|
|
} else {
|
|
loader.style.width = '100vw';
|
|
loader.style.height = '100vh';
|
|
}
|
|
</script>
|
|
|
|
<script
|
|
src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs"
|
|
type="module">
|
|
</script>
|
|
<dotlottie-player
|
|
src="https://lottie.host/1cb2c811-f2b9-4ec8-a92c-e834ad6d2be8/WVsHVPkOXw.lottie"
|
|
background="transparent"
|
|
speed="1"
|
|
loop
|
|
autoplay>
|
|
</dotlottie-player>
|
|
</div>
|
|
</body>
|
|
</html>
|