Logo Logo

Documentation v1.1.5

Preview
Light
Dark
System

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>
try metronic buy mega bundle
Preview Get Help Buy Now