<div id="delay-example" class="dark:text-white">
<input
class="me-2 mt-[0.3rem] h-3.5 w-8 appearance-none rounded-[0.4375rem] bg-black/25 before:pointer-events-none before:absolute before:h-3.5 before:w-3.5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:-mt-[0.1875rem] after:h-5 after:w-5 after:rounded-full after:border-none after:bg-white after:shadow-switch-2 after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-primary checked:after:absolute checked:after:z-[2] checked:after:-mt-[3px] checked:after:ms-[1.0625rem] checked:after:h-5 checked:after:w-5 checked:after:rounded-full checked:after:border-none checked:after:bg-primary checked:after:shadow-switch-1 checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer focus:outline-none focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-switch-3 focus:before:shadow-black/60 focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-5 focus:after:w-5 focus:after:rounded-full focus:after:content-[''] checked:focus:border-primary checked:focus:bg-primary checked:focus:before:ms-[1.0625rem] checked:focus:before:scale-100 checked:focus:before:shadow-switch-3 checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] dark:bg-white/25 dark:after:bg-surface-dark dark:checked:bg-primary dark:checked:after:bg-primary"
type="checkbox"
role="switch"
id="flexSwitchCheckDefault" />
<label
class="inline-block ps-[0.15rem] hover:cursor-pointer"
for="flexSwitchCheckDefault"
>Switch Delay</label
>
<div id="counter"></div>
</div>
// Initialization for ES Users
import { LoadingManagement } from "tw-elements";
const loaderDelay = `
<div id="loading-wrapper">
<div id="loading-delay">
<div
data-twe-loading-icon-ref
class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]"
role="status"></div>
<span data-twe-loading-text-ref>Loading...</span>
</div>
</div>
`;
const switches = document.getElementById("flexSwitchCheckDefault");
let timeleft = 4;
switches.addEventListener("change", (e) => {
const test = document.getElementById("delay-example");
if (e.target.checked) {
test.insertAdjacentHTML("beforeend", loaderDelay);
const loadingDelay = document.getElementById("loading-delay");
const counter = document.getElementById("counter");
const downloadTimer = setInterval(function () {
counter.classList.add(
"text-3xl",
"font-semibold",
"flex",
"justify-center",
"items-center"
);
if (timeleft <= 0) {
clearInterval(downloadTimer);
timeleft = 4;
}
counter.innerHTML = timeleft;
timeleft -= 1;
}, 1000);
new LoadingManagement(loadingDelay, {
delay: 5000,
backdropID: "delay-backdrop",
});
setTimeout(() => {
const backdrop = document.getElementById("delay-backdrop");
backdrop.remove();
loadingDelay.remove();
document.body.classList.remove("overflow-hidden");
}, 8000);
} else {
const loadingDelay = document.getElementById("loading-wrapper");
loadingDelay.remove();
document.getElementById("counter").innerHTML = "";
}
});
const loaderDelay = `
<div id="loading-wrapper">
<div id="loading-delay">
<div
data-twe-loading-icon-ref
class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]"
role="status"></div>
<span data-twe-loading-text-ref>Loading...</span>
</div>
</div>
`;
const switches = document.getElementById("flexSwitchCheckDefault");
let timeleft = 4;
switches.addEventListener("change", (e) => {
const test = document.getElementById("delay-example");
if (e.target.checked) {
test.insertAdjacentHTML("beforeend", loaderDelay);
const loadingDelay = document.getElementById("loading-delay");
const counter = document.getElementById("counter");
const downloadTimer = setInterval(function () {
counter.classList.add(
"text-3xl",
"font-semibold",
"flex",
"justify-center",
"items-center"
);
if (timeleft <= 0) {
clearInterval(downloadTimer);
timeleft = 4;
}
counter.innerHTML = timeleft;
timeleft -= 1;
}, 1000);
new twe.LoadingManagement(loadingDelay, {
delay: 5000,
backdropID: "delay-backdrop",
});
setTimeout(() => {
const backdrop = document.getElementById("delay-backdrop");
backdrop.remove();
loadingDelay.remove();
document.body.classList.remove("overflow-hidden");
}, 8000);
} else {
const loadingDelay = document.getElementById("loading-wrapper");
loadingDelay.remove();
document.getElementById("counter").innerHTML = "";
}
});