New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
Metronic 9 tailwind - page loading
Is the base "page loading" component also available in tailwind version?
Basically this component
https://preview.keenthemes.com/html/metronic/docs/base/page-loading
But for the tailwind version. Ideally not only with the classic spinner, but also with some kind of brand/logo.
Same quesiton for indicator/overlay
https://preview.keenthemes.com/html/metronic/docs/base/indicator
https://preview.keenthemes.com/html/metronic/docs/base/overlay
Thank you
Replies (1)
Hi,
We don't have the page loaders at the moment however you can use the below code and adjust it for your project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Loading Indicator</title>
<script src="
</head>
<body class="bg-gray-100">
<!-- Loading Overlay -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="w-16 h-16 border-4 border-t-4 border-t-blue-500 border-gray-200 rounded-full animate-spin"></div>
</div>
<!-- Sample Content -->
<div class="container mx-auto p-4">
<h1 class="text-2xl font-bold mb-4">Sample Page</h1>
<button onclick="simulateLoading()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Simulate Loading
</button>
</div>
<script>
// Function to show loading indicator
function showLoading() {
document.getElementById("loadingOverlay").classList.remove("hidden");
}
// Function to hide loading indicator
function hideLoading() {
document.getElementById("loadingOverlay").classList.add("hidden");
}
// Simulate loading for demonstration
function simulateLoading() {
showLoading();
setTimeout(hideLoading, 2000); // Hide after 2 seconds
}
// Optional: Show loading on page load
window.addEventListener("load", () => {
showLoading();
setTimeout(hideLoading, 1000); // Hide after 1 second
});
</script>
</body>
</html>Regards,
Sean
