<title>Loading Page Example</title>
<style>
/* Styles for the overlay */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
display: none; /* Initially hidden */
}
/* Styles for the loading spinner */
.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
border-top: 4px solid #333;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<!– Overlay with loading spinner –>
<div class=”overlay” id=”loadingOverlay”>
<div class=”spinner”></div>
<p>Loading…</p>
</div>
<!– Your page content goes here –>
<h1>Welcome to My Website</h1>
<script>
// Show loading overlay while the page is loading
window.addEventListener(‘load’, function() {
var overlay = document.getElementById(‘loadingOverlay’);
overlay.style.display = ‘none’; // Hide the overlay when the page is fully loaded
});
</script>