<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download Progress Bar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
#download-progress-pomsd {
margin-top: 5%;
background: #000;
color:#fff;
}
</style>
</head>
<body>
<div class="container">
<div class="my-5" id="download-progress-pomsd" style="display: block;" data-bytes="1000000">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="progress-bar">
</div>
</div>
<div id="progress-info">
<div id="progress-title">Downloading...</div>
<div id="download-size-info"></div>
<div id="download-speed"></div>
<div id="download-eta"></div>
</div>
</div>
</div>
<script>
function updateProgress() {
const progressBar = document.getElementById('progress-bar');
const progressInfo = document.getElementById('progress-info');
const downloadSizeInfo = document.getElementById('download-size-info');
const downloadSpeed = document.getElementById('download-speed');
const downloadETA = document.getElementById('download-eta');
const totalBytes = parseInt(document.getElementById('download-progress-pomsd').getAttribute('data-bytes'));
let downloadedBytes = 0;
let startTime = new Date().getTime();
const update = () => {
const currentTime = new Date().getTime();
const elapsedSeconds = (currentTime - startTime) / 1000;
const downloadPercentage = (downloadedBytes / totalBytes) * 100;
const downloadSpeedValue = downloadedBytes / elapsedSeconds;
const remainingBytes = totalBytes - downloadedBytes;
const remainingTime = remainingBytes / downloadSpeedValue;
progressBar.style.width = downloadPercentage + '%';
downloadSizeInfo.textContent = `Downloaded: ${downloadedBytes} / ${totalBytes} bytes`;
downloadSpeed.textContent = `Speed: ${downloadSpeedValue.toFixed(2)} bytes/s`;
downloadETA.textContent = `ETA: ${remainingTime.toFixed(2)} seconds`;
if (downloadedBytes < totalBytes) {
requestAnimationFrame(update);
}
};
// Simulate a download process
const downloadInterval = setInterval(() => {
downloadedBytes += Math.random() * 10000;
if (downloadedBytes >= totalBytes) {
downloadedBytes = totalBytes;
clearInterval(downloadInterval);
}
}, 500);
update();
}
updateProgress();
</script>
</body>
</html>
.png)
Contact Us!
0 Comments
type your comment...