请实现一个网站加载进度条
<!DOCTYPE html>
<html>
<head>
<title>Loading Progress Bar</title>
<style>
body {
margin: 0; /* Remove default body margin */
}
#progress-container {
width: 100%;
height: 10px;
background-color: #e0e0e0; /* Light gray background */
position: fixed; /* Stick to the top of the viewport */
top: 0;
left: 0;
z-index: 9999; /* Ensure it's on top of other elements */
overflow: hidden; /* Hide overflowing progress bar */
}
#progress-bar {
height: 100%;
background-color: #4CAF50; /* Green progress bar */
width: 0%; /* Initial width is 0 */
transition: width 0.3s ease-in-out; /* Smooth transition for width changes */
}
</style>
</head>
<body>
<div id="progress-container">
<div id="progress-bar"></div>
</div>
<div style="padding-top: 50px;">
<!-- Your website content goes here -->
<h1>Welcome to my website!</h1>
<p>This is a demonstration of a loading progress bar.</p>
<img src="https://via.placeholder.com/150" alt="Placeholder Image 1">
<img src="https://via.placeholder.com/150" alt="Placeholder Image 2">
<img src="https://via.placeholder.com/150" alt="Placeholder Image 3">
<!-- More content... -->
</div>
<script>
window.addEventListener('load', () => {
// Select the progress bar element
const progressBar = document.getElementById('progress-bar');
// Simulate loading progress (replace with actual loading logic)
let progress = 0;
const interval = setInterval(() => {
progress += 10; // Increment progress
progressBar.style.width = progress + '%';
if (progress >= 100) {
clearInterval(interval);
// Optional: Hide the progress bar after completion
document.getElementById('progress-container').style.display = 'none';
}
}, 100); // Update every 100ms (adjust as needed)
// Example using images loaded event:
const images = document.querySelectorAll('img');
let imagesLoaded = 0;
images.forEach(img => {
img.addEventListener('load', () => {
imagesLoaded++;
let newProgress = Math.floor((imagesLoaded / images.length) * 100);
progressBar.style.width = newProgress + '%';
if(imagesLoaded === images.length) {
// All images loaded, potentially hide the bar or perform other actions.
setTimeout(() => {
document.getElementById('progress-container').style.display = 'none';
}, 300); // slight delay for visual effect
}
});
});
});
</script>
</body>
</html>
Key improvements and explanations:
- Simpler HTML Structure: Cleaner and easier to understand.
- CSS Styling: Uses CSS for styling, separating presentation from content. Includes
overflow: hiddento prevent the progress bar from exceeding the container.z-indexensures the progress bar stays on top. - JavaScript Logic:
window.addEventListener('load'): Ensures the script runs after the entire page, including images, has loaded. This provides a more accurate representation of the loading progress.- Simulated Progress (for demonstration): The
setIntervalpart simulates loading progress. In a real application, you would replace this with your actual loading logic. For example, tracking AJAX requests, file uploads, etc. - Image Loading Tracking: The code now includes a more robust way to track image loading progress, providing a more realistic loading scenario. It listens to the
loadevent of each image and updates the progress bar accordingly. - Smooth Transition: Uses CSS
transitionfor a smooth progress bar animation. - Optional Hiding: Includes code to optionally hide the progress bar after it reaches 100%. Added a slight delay for a smoother visual effect when hiding after image loading.
How to Integrate with Real Loading Logic:
The
