<div id="full-screen-example">
<button
id="btn-full-screen"
type="button"
data-te-ripple-init
data-te-ripple-color="light"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
Full screen
</button>
</div>
// Initialization for ES Users
import {
LoadingManagement,
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
const loaderFull = `
<div id="loading-full">
<div
data-te-loading-icon-ref
class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]"
role="status"></div>
<span data-te-loading-text-ref>Loading...</span>
</div>
`;
const btnfull = document.getElementById("btn-full-screen");
btnfull.addEventListener("click", () => {
const test2 = document.getElementById("full-screen-example");
test2.insertAdjacentHTML("beforeend", loaderFull);
const loadingFull = document.getElementById("loading-full");
const loading = new LoadingManagement(loadingFull, {
scroll: false,
backdropID: "full-backdrop",
});
setTimeout(() => {
loading.dispose();
document.body.classList.remove("overflow-hidden");
}, 5000);
});
const loaderFull = `
<div id="loading-full">
<div
data-te-loading-icon-ref
class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]"
role="status"></div>
<span data-te-loading-text-ref>Loading...</span>
</div>
`;
const btnfull = document.getElementById("btn-full-screen");
btnfull.addEventListener("click", () => {
const test2 = document.getElementById("full-screen-example");
test2.insertAdjacentHTML("beforeend", loaderFull);
const loadingFull = document.getElementById("loading-full");
const loading = new te.LoadingManagement(loadingFull, {
scroll: false,
backdropID: "full-backdrop",
});
setTimeout(() => {
loading.dispose();
document.body.classList.remove("overflow-hidden");
}, 5000);
});