prof3ssorSt3v3/index.html

## index.html
<!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>

## main.js
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) => {});
});
	<!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>
	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) => {});
	});