Skip to content

Instantly share code, notes, and snippets.

@nonodev96

nonodev96/progressMultiple.html

Created June 11, 2023 12:52
Show Gist options
  • Save nonodev96/d09d2a63f5208689e526b34cadd9e73a to your computer and use it in GitHub Desktop.
Save nonodev96/d09d2a63f5208689e526b34cadd9e73a to your computer and use it in GitHub Desktop.
Download ZIP
Progress download detector in simple and multiple downloads with fetch
Raw
progressMultiple.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
progress {
position: absolute;
height: 1.25em;
width: 500px;
border: 0;
border-radius: 20px;
overflow: hidden;
}
progress::before {
/* content: "Loading: " attr(value) "%"; */
position: absolute;
width: 100%;
text-align: center;
font-size: 18px;
color: blue;
border: 0;
border-radius: 20px;
}
progress::-webkit-progress-bar {
background-color: rgb(203, 203, 203);
}
progress::-webkit-progress-value {
background-color: blue;
}
</style>
</head>
<body>
<button onclick="download()">Download</button> <br> <br>
<span>Progress</span>
<progress id="download_progress" max="100" value="1"> 1% </progress>
<script>
const download_progressElement = document.getElementById("download_progress")
const init = async function () {
const promises = [
fetch("https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/group1-shard1of5"),
fetch("https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/group1-shard2of5"),
fetch("https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/group1-shard3of5"),
fetch("https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/group1-shard4of5"),
fetch("https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/group1-shard5of5")
]
try {
const responses = await Promise.all(promises)
console.log({ responses });
let totalSizeResponses = 0
let totalSizeDownloads = 0
async function readFetchs(reader) {
const result = await reader.read()
if (result.value) {
totalSizeDownloads += result.value.length
const percentage = Math.floor((totalSizeDownloads / totalSizeResponses) * 100)
download_progressElement.value = percentage
download_progressElement.textContent = percentage + "%"
console.log({ totalSizeResponses, totalSizeDownloads, percentage });
}
if (!result.done) {
await readFetchs(reader)
}
}
if (Array.isArray(responses)) {
for (const response of responses) {
totalSizeResponses += Number(response.headers.get("content-length"))
}
for (const response of responses) {
const reader = response.body.getReader()
await readFetchs(reader)
}
}
} catch (error) {
console.log("catch", error)
} finally {
console.log("finally")
}
}
function download() {
init()
.then(() => { console.log("end"); })
}
</script>
</body>
</html>
Raw
progressSimple.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
progress {
position: absolute;
height: 1.25em;
width: 500px;
border: 0;
border-radius: 20px;
overflow: hidden;
}
progress::before {
/* content: "Loading: " attr(value) "%"; */
position: absolute;
width: 100%;
text-align: center;
font-size: 18px;
color: blue;
border: 0;
border-radius: 20px;
}
progress::-webkit-progress-bar {
background-color: rgb(203, 203, 203);
}
progress::-webkit-progress-value {
background-color: blue;
}
</style>
</head>
<body>
<button onclick="download()">Download</button> <br> <br>
<span>Progress</span>
<progress id="download_progress" max="100" value="1"> 1% </progress>
<script>
const download_progressElement = document.getElementById("download_progress")
const init = async function () {
await
fetch("https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/group1-shard1of5")
.then((response) => {
console.log("response");
const reader = response.body.getReader()
const totalSize = Number(response.headers.get("content-length"))
let totalSizeDownload = 0
function read() {
return reader
.read()
.then((result) => {
if (result.value) {
totalSizeDownload += result.value.length
const percentage = Math.floor((totalSizeDownload / totalSize) * 100)
console.log({ totalSizeDownload, totalSize, percentage });
download_progressElement.value = percentage
download_progressElement.textContent = percentage + "%"
}
if (!result.done) {
return read()
}
})
}
read()
})
.then(() => { console.log("then"); })
.catch(() => { console.log("catch"); })
.finally(() => { console.log("finally"); })
}
function download() {
init()
.then(() => {
console.log("end");
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment