Loading...
<!DOCTYPE html>
<html>
<head>
<title>Loading Screen Example</title>
<style>
/* CSS for the loading screen */
.loading {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
color: white;
text-align: center;
font-size: 24px;
padding-top: 20%;
}
/* CSS for the code div */
.code {
display: none;
background-color: yellow;
padding: 20px;
}
</style>
</head>
<body>
<button onclick="showCode()">Show Code</button>
<div class="loading" id="loading">Loading...</div>
<div id="content" style="display: none;">
<!-- Your webpage content goes here -->
<h1>Welcome to My Website</h1>
<p>This is the content of my webpage.</p>
</div>
<script>
// Show loading screen
document.getElementById('loading').style.display = 'block';
// Hide loading screen after 5 seconds
setTimeout(function() {
document.getElementById('loading').style.display = 'none';
document.getElementById('content').style.display = 'block'; // Show content after loading
}, 5000); // 5 seconds in milliseconds
function showCode() {
document.getElementById('code').style.display = 'block';
}
</script>
</body>
</html>
<html>
<head>
<title>Loading Screen Example</title>
<style>
/* CSS for the loading screen */
.loading {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
color: white;
text-align: center;
font-size: 24px;
padding-top: 20%;
}
/* CSS for the code div */
.code {
display: none;
background-color: yellow;
padding: 20px;
}
</style>
</head>
<body>
<button onclick="showCode()">Show Code</button>
<div class="loading" id="loading">Loading...</div>
<div id="content" style="display: none;">
<!-- Your webpage content goes here -->
<h1>Welcome to My Website</h1>
<p>This is the content of my webpage.</p>
</div>
<script>
// Show loading screen
document.getElementById('loading').style.display = 'block';
// Hide loading screen after 5 seconds
setTimeout(function() {
document.getElementById('loading').style.display = 'none';
document.getElementById('content').style.display = 'block'; // Show content after loading
}, 5000); // 5 seconds in milliseconds
function showCode() {
document.getElementById('code').style.display = 'block';
}
</script>
</body>
</html>
Comments
Post a Comment
say something