Created
May 4, 2024 20:16
-
-
Save prof3ssorSt3v3/c13003e4ff199bf6ea15843352d549e7 to your computer and use it in GitHub Desktop.
Code for Video about Monitoring Download Progress and displaying it with SVG animations
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>SVG Progress Display for File Downloads</title> | |
| <style> | |
| :root { | |
| --bgcolor: hsl(220, 20%, 70%); | |
| --focuscolor: hsl(220, 80%, 50%); | |
| --txtcolor: hsl(20, 80%, 50%); | |
| --percentage: 0; | |
| --size: 150px; | |
| --circ: 251.33; /* circumference = diameter * PI */ | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| } | |
| img { | |
| width: 90%; | |
| } | |
| .progress { | |
| width: var(--size); | |
| height: var(--size); | |
| } | |
| .circle-background { | |
| stroke: var(--bgcolor); | |
| stroke-width: 10; | |
| fill: none; | |
| } | |
| .circle-progress { | |
| stroke: var(--focuscolor); | |
| stroke-width: 6; | |
| stroke-dasharray: var(--circ); | |
| stroke-dashoffset: calc(var(--circ) - (var(--circ) * var(--percentage) / 100)); | |
| fill: none; | |
| transition: stroke-dashoffset 0.3s linear; | |
| } | |
| .pct-text { | |
| fill: var(--txtcolor); | |
| font-size: 40px; | |
| text-anchor: middle; | |
| } | |
| </style> | |
| <script src="./main.js" type="module"></script> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Tracking Download Progress</h1> | |
| <h2>Circular SVG Progress Meter</h2> | |
| </header> | |
| <main> | |
| <svg class="progress" viewBox="0, 0, 100, 100"> | |
| <circle class="circle-background" cx="50" cy="50" r="40" /> | |
| <circle class="circle-progress" cx="50" cy="50" r="40" /> | |
| <text class="pct-text" x="50" y="63">100</text> | |
| </svg> | |
| <p id="output"></p> | |
| <p id="image"><img src="" alt="picsum image loading" /></p> | |
| </main> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.addEventListener('DOMContentLoaded', () => { | |
| //when the page loads | |
| //set the default value for the progress meter | |
| //set the message about progress value | |
| //start downloading the file | |
| let pct = 0; | |
| const url = 'https://picsum.photos/id/237/1500/1200'; | |
| fetch(url) | |
| .then((response) => { | |
| //we now have the headers | |
| const contentLen = +response.headers.get('content-length'); | |
| let downloaded = 0; | |
| const chunks = []; | |
| const reader = response.body.getReader(); | |
| function readChunk() { | |
| reader.read().then(({ done, value }) => { | |
| if (done) { | |
| //finished downloading the file | |
| const blob = new Blob(chunks, { type: 'image/jpeg' }); | |
| const url = URL.createObjectURL(blob); | |
| const img = document.querySelector('#image img'); | |
| img.src = url; | |
| return; | |
| } | |
| downloaded += value.byteLength; | |
| pct = Math.round((downloaded / contentLen) * 100); | |
| console.log(pct, 'downloaded'); | |
| document.getElementById('output').textContent = pct + '% downloaded'; | |
| document.querySelector('.pct-text').textContent = pct; | |
| document.querySelector('.progress').style.setProperty('--percentage', pct); | |
| chunks.push(value); | |
| readChunk(); | |
| }); | |
| } | |
| readChunk(); | |
| }) | |
| .catch((err) => {}); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment