Overview
Page Loading is a custom component to display a loading indicator over the page content.
The page loading element can be appended to the body element in advance or populated dynamically.
Basic
Click on the below button to toggle a page loading state with basic spinner indicator:
// Toggle
const button = document.querySelector("#kt_page_loading_basic");
// Handle toggle click event
button.addEventListener("click", function() {
// Populate the page loading element dynamically.
// Optionally you can skipt this part and place the HTML
// code in the body element by refer to the above HTML code tab.
const loadingEl = document.createElement("div");
document.body.append(loadingEl);
loadingEl.classList.add("page-loader");
loadingEl.innerHTML = `
<span class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</span>
`;
// Show page loading
KTApp.showPageLoading();
// Hide after 3 seconds
setTimeout(function() {
KTApp.hidePageLoading();
loadingEl.remove();
}, 3000);
});<!--begin::Page loading(append to body)-->
<div class="page-loader">
<span class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</span>
</div>
<!--end::Page loading-->Message
Click on the below button to toggle a page loading state with basic spinner indicator and text message:
// Toggle
const button = document.querySelector("#kt_page_loading_message");
// Handle toggle click event
button.addEventListener("click", function() {
// Populate the page loading element dynamically.
// Optionally you can skipt this part and place the HTML
// code in the body element by refer to the above HTML code tab.
const loadingEl = document.createElement("div");
document.body.prepend(loadingEl);
loadingEl.classList.add("page-loader");
loadingEl.classList.add("flex-column");
loadingEl.innerHTML = `
<span class="spinner-border text-primary" role="status"></span>
<span class="text-muted fs-6 fw-semibold mt-5">Loading...</span>
`;
// Show page loading
KTApp.showPageLoading();
// Hide after 3 seconds
setTimeout(function() {
KTApp.hidePageLoading();
loadingEl.remove();
}, 3000);
});<!--begin::Page loading(append to body)-->
<div class="page-loader flex-column">
<span class="spinner-border text-primary" role="status"></span>
<span class="text-muted fs-6 fw-semibold mt-5">Loading...</span>
</div>
<!--end::Page loading-->Overlay
Click on the below button to toggle a page loading state with basic spinner indicator and text message along with overlay background color:
// Toggle
const button = document.querySelector("#kt_page_loading_overlay");
// Handle toggle click event
button.addEventListener("click", function() {
// Populate the page loading element dynamically.
// Optionally you can skipt this part and place the HTML
// code in the body element by refer to the above HTML code tab.
const loadingEl = document.createElement("div");
document.body.prepend(loadingEl);
loadingEl.classList.add("page-loader");
loadingEl.classList.add("flex-column");
loadingEl.classList.add("bg-dark");
loadingEl.classList.add("bg-opacity-25");
loadingEl.innerHTML = `
<span class="spinner-border text-primary" role="status"></span>
<span class="text-gray-800 fs-6 fw-semibold mt-5">Loading...</span>
`;
// Show page loading
KTApp.showPageLoading();
// Hide after 3 seconds
setTimeout(function() {
KTApp.hidePageLoading();
loadingEl.remove();
}, 3000);
});<!--begin::Page loading(append to body)-->
<div class="page-loader flex-column bg-dark bg-opacity-25">
<span class="spinner-border text-primary" role="status"></span>
<span class="text-gray-800 fs-6 fw-semibold mt-5">Loading...</span>
</div>
<!--end::Page loading-->Initial
To display the loading on initial page load, append the one of the above loaders HTML code to the body element and set
data-kt-app-page-loading-enabled="true" and data-kt-app-page-loading="on" attributes.
Thus the loading indicator will be shown on the initial page loading and automatically hidden once page loading is completed.
<body class="app-default" data-kt-app-page-loading-enabled="true" data-kt-app-page-loading="on">
<!--begin::Page loading(append to body)-->
<div class="page-loader">
<span class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</span>
</div>
<!--end::Page loading-->
...
</body>
2024©
Keenthemes
