Issue
I am building a static html page website. I want to show full screen loading status with progress bar before page completely loads. Including all images and external assets. Once page is fully loaded, loading screen will be hidden and page will be visible to the user.
I was able to detect when page fully loads by attaching 'load' event listener on window. But am not able to get the progress bar to function as expected. I want to show progress in percentage. For this I need to entire size of the page including all assets and amount of resources currently transferred so I can do simple math convert it percentage.
I did some research there is not a straightforward way to do this. I have seen many websites using similar progress bar loading animations.
Now how can I achieve similar effect? I want to show progress value in percentage to the user as page loads.
Solution
Here is a possible way to do it on a static page if you do not want to fake it
the parts can be tweaked. For example I get 81% so I use timeout to show anyway.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Loading Progress</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" onload="updateProgress()">
<!-- Additional CSS links here -->
<style>
.image-column {
column-count: 2;
}
img {
width: 100%;
margin-bottom: 10px;
}
</style>
<script>
let loadCounter = 0;
let totalElements = 16;
const updateProgress = () => {
loadCounter++;
const progress = (loadCounter / totalElements) * 100;
const progressBar = document.getElementById('progressBar');
progressBar.style.width = progress + '%';
progressBar.textContent = Math.round(progress) + '%';
if (progress === 100) {
document.querySelector('.progress').hidden = true;
document.querySelector('main').hidden = false;
}
}
setTimeout(() => {
document.querySelector('.progress').hidden = true;
document.querySelector('main').hidden = false;
},3000)
</script>
</head>
<body>
<header>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" id="progressBar">0%</div>
</div>
</header>
<main hidden>
<div class="image-column">
<!-- 10 Images from Lorem Pixel -->
<img src="http://placekitten.com/200/300" onload="updateProgress()">
<img src="https://placekitten.com/200/300" onload="updateProgress()">
<img src="https://placekitten.com/200/300" onload="updateProgress()">
<img src="https://placekitten.com/200/300" onload="updateProgress()">
<img src="https://placekitten.com/200/300" onload="updateProgress()">
<img src="https://placekitten.com/200/300" onload="updateProgress()">
<img src="https://placekitten.com/200/300" onload="updateProgress()">
<img src="https://placekitten.com/200/300" onload="updateProgress()">
<img src="https://placekitten.com/200/300" onload="updateProgress()">
<img src="https://placekitten.com/200/300" onload="updateProgress()">
</div>
</main>
<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" onload="updateProgress()"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" onload="updateProgress()"></script>
<script>
// totalElements = document.querySelectorAll('script, link, img').length;
</script>
</body>
</html>Answered By - mplungjan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.