webart
/
fyrox-platformer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

preloader

This commit is contained in:
artem 2024-01-14 22:42:13 +03:00
parent 373e318e8d
commit 760a76a3e6
2 changed files with 93 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
executor-wasm/index.html
View File

@ -10,14 +10,20 @@
</head>
<body>
<noscript>This page contains WebAssembly and JavaScript content, please enable JavaScript in your browser.</noscript>
<noscript>This page contains WebAssembly and JavaScript content, please enable JavaScript in your browser.</noscript>
<div class="lds-default" style="display: none;"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<main id="main">
<button class="button-3d" id="button-start" type="button" role="button">
<button class="button-3d" id="button-start" type="button" role="button" onclick="preloaderEnable()">
Start
</button>
</main>
</main>
</body>
<script>
function preloaderEnable() {
document.querySelector('.lds-default').style = null;
}
const intervalId = setInterval(function() {
if (document.querySelector('canvas') !== null) {
document.querySelector('canvas');
@ -34,6 +40,7 @@
}).observe(document.body);
function resize(canvasObj) {
document.querySelector('.lds-default').style.display = "none";
canvasObj.style = null;
canvasObj.width = window.screen.width * window.devicePixelRatio;
canvasObj.height = window.screen.height * window.devicePixelRatio;

83
executor-wasm/styles.css
View File

@ -47,4 +47,87 @@ body {
perspective: 500px;
transform-style: preserve-3d;
background-color: yellowgreen;
}
.lds-default {
margin: 15% auto;
position: relative;
width: 80px;
height: 80px;
}
.lds-default div {
position: absolute;
width: 6px;
height: 6px;
background: #4230e2;
border-radius: 50%;
animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
animation-delay: 0s;
top: 37px;
left: 66px;
}
.lds-default div:nth-child(2) {
animation-delay: -0.1s;
top: 22px;
left: 62px;
}
.lds-default div:nth-child(3) {
animation-delay: -0.2s;
top: 11px;
left: 52px;
}
.lds-default div:nth-child(4) {
animation-delay: -0.3s;
top: 7px;
left: 37px;
}
.lds-default div:nth-child(5) {
animation-delay: -0.4s;
top: 11px;
left: 22px;
}
.lds-default div:nth-child(6) {
animation-delay: -0.5s;
top: 22px;
left: 11px;
}
.lds-default div:nth-child(7) {
animation-delay: -0.6s;
top: 37px;
left: 7px;
}
.lds-default div:nth-child(8) {
animation-delay: -0.7s;
top: 52px;
left: 11px;
}
.lds-default div:nth-child(9) {
animation-delay: -0.8s;
top: 62px;
left: 22px;
}
.lds-default div:nth-child(10) {
animation-delay: -0.9s;
top: 66px;
left: 37px;
}
.lds-default div:nth-child(11) {
animation-delay: -1s;
top: 62px;
left: 52px;
}
.lds-default div:nth-child(12) {
animation-delay: -1.1s;
top: 52px;
left: 62px;
}
@keyframes lds-default {
0%, 20%, 80%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}