Documentation v8.2.5

Downloads Preview

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>