mirror of
https://github.com/sigmasternchen/mobmash.click
synced 2025-03-15 08:09:02 +00:00
feat: Change loading animation
This commit is contained in:
parent
be991b99fc
commit
90bd9ef5ca
6 changed files with 46 additions and 23 deletions
|
@ -50,24 +50,18 @@ h1 {
|
|||
text-align: center;
|
||||
transform: translate(0%, -50%);
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.middle .spinner {
|
||||
.loading .or {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.img-preload .spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
.img-preload .or {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.middle .spinner img {
|
||||
.loading .spinner img {
|
||||
animation-name: spinner;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 0.2s;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
|
||||
}
|
||||
|
||||
|
@ -80,7 +74,6 @@ h1 {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.mob {
|
||||
width: 40vw;
|
||||
height: 42vw;
|
||||
|
|
|
@ -13,14 +13,9 @@ htmx.defineExtension('img-preload', {
|
|||
return;
|
||||
}
|
||||
|
||||
const getSpinners = () => [...document.querySelectorAll(
|
||||
event.target.getAttribute("data-preload-spinner")
|
||||
?? ".img-preload"
|
||||
)];
|
||||
|
||||
switch (name) {
|
||||
case 'htmx:trigger':
|
||||
getSpinners().forEach(s => s.classList.add("img-preload"));
|
||||
[eval][0](event.target.getAttribute("data-loading-callback"));
|
||||
break;
|
||||
case 'htmx:beforeOnLoad':
|
||||
event.detail.shouldSwap = false;
|
||||
|
@ -42,7 +37,7 @@ htmx.defineExtension('img-preload', {
|
|||
swapStyle: "outerHTML",
|
||||
transition: true,
|
||||
});
|
||||
getSpinners().forEach(s => s.classList.remove("img-preload"))
|
||||
[eval][0](event.target.getAttribute("data-loaded-callback"));
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading images:', error);
|
||||
|
|
|
@ -1,2 +1,4 @@
|
|||
import './htmx';
|
||||
import './img-preload.ext';
|
||||
|
||||
import './spinner';
|
33
resources/js/spinner.js
Normal file
33
resources/js/spinner.js
Normal file
|
@ -0,0 +1,33 @@
|
|||
var spinnerActive = false;
|
||||
|
||||
const triggerAnimation = () => {
|
||||
setTimeout(() => {
|
||||
document.getElementsByClassName("middle")[0].classList.add("loading");
|
||||
}, 1);
|
||||
}
|
||||
|
||||
const endAnimation = () => {
|
||||
document.getElementsByClassName("middle")[0].classList.remove("loading");
|
||||
}
|
||||
|
||||
window.startSpinner = () => {
|
||||
if (spinnerActive) {
|
||||
return
|
||||
}
|
||||
spinnerActive = true;
|
||||
document.getElementsByClassName("middle")[0].classList.add("loading");
|
||||
}
|
||||
|
||||
window.stopSpinner = () => {
|
||||
spinnerActive = false;
|
||||
}
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
document.querySelector(".middle .spinner img")
|
||||
.addEventListener("animationend", () => {
|
||||
endAnimation();
|
||||
if (spinnerActive) {
|
||||
triggerAnimation();
|
||||
}
|
||||
});
|
||||
});
|
|
@ -6,7 +6,7 @@
|
|||
<div class="mob" onclick="htmx.trigger(document.forms['<?= $side ?>'], 'submit', {})" id="form-<?= $side ?>">
|
||||
<form action="?<?= $side ?>" method="POST" name="<?= $side ?>"
|
||||
data-hx-post="?<?= $side ?>&ajax" data-hx-target=".selection" data-hx-swap="outerHTML"
|
||||
data-hx-ext="img-preload" data-preload-spinner=".middle">
|
||||
data-hx-ext="img-preload" data-loading-callback="startSpinner()" data-loaded-callback="stopSpinner()">
|
||||
<input type="hidden" name="csrfToken" value="<?= $csrfToken ?>">
|
||||
<h2><?= $mob["name"]; ?></h2>
|
||||
<img alt="<?= $mob["name"]; ?>" src="/images/mobs/<?= $mob["image"] ?? "_placeholder.png"; ?>">
|
||||
|
|
|
@ -8,11 +8,11 @@
|
|||
require_once __DIR__ . "/../fragments/mobSelection.php";
|
||||
?>
|
||||
<div class="middle">
|
||||
<div class="or">
|
||||
OR
|
||||
</div>
|
||||
<div class="spinner">
|
||||
<img src="/images/gras.png" alt="spinner" />
|
||||
</div>
|
||||
<div class="or">
|
||||
OR
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue