From 0c42401d27dd8534be386dfd9a5cf2ebf7593da8 Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Tue, 1 Jul 2025 18:07:14 +0100
Subject: [PATCH] Add improvements to CSS progress() demo

---
 css-progress/index.css | 52 ++++++++++++++++++++++++++++++++++--------
 css-progress/index.js  |  4 ++--
 2 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/css-progress/index.css b/css-progress/index.css
index e8f4045..05cb4cf 100644
--- a/css-progress/index.css
+++ b/css-progress/index.css
@@ -12,19 +12,27 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
+  --custom-minwidth: 320px;
+  --custom-maxwidth: 1200px;
 }
 
 article {
+  min-width: var(--custom-minwidth);
+  max-width: var(--custom-maxwidth);
   position: relative;
-  min-width: 320px;
-  max-width: 1200px;
   width: 70%;
   height: 600px;
   border: 3px solid black;
 }
 
 .progress {
-  width: calc((progress(var(--container-width), 320, 1200)) * 100%);
+  width: calc(
+    progress(
+        var(--container-width),
+        var(--custom-minwidth),
+        var(--custom-maxwidth)
+      ) * 100%
+  );
   height: 4px;
   background-color: red;
   position: absolute;
@@ -37,7 +45,11 @@ article {
   inset: 0;
   background-image: url(https://mdn.github.io/shared-assets/images/examples/wide-background.jpg);
   background-position-x: calc(
-    progress(var(--container-width), 320, 1200) * 100%
+    progress(
+        var(--container-width),
+        var(--custom-minwidth),
+        var(--custom-maxwidth)
+      ) * 100%
   );
 }
 
@@ -46,13 +58,33 @@ article {
   inset: 0;
   padding: 20px;
   background-color: rgb(
-    calc(255 * progress(var(--container-width), 320, 1200))
-      calc(255 * progress(var(--container-width), 320, 1200)) 255 / 0.5
+    calc(
+        255 *
+          progress(
+            var(--container-width),
+            var(--custom-minwidth),
+            var(--custom-maxwidth)
+          )
+      )
+      calc(
+        255 *
+          progress(
+            var(--container-width),
+            var(--custom-minwidth),
+            var(--custom-maxwidth)
+          )
+      )
+      255 / 0.5
+  );
+  opacity: calc(
+    (
+        progress(
+            var(--container-width),
+            var(--custom-minwidth),
+            var(--custom-maxwidth)
+          ) / 2
+      ) + 0.5
   );
-  opacity: calc((progress(var(--container-width), 320, 1200) / 2) + 0.5);
-
-  /* Works without calc */
-  /* opacity: progress(var(--container-width), 320, 1200); */
 }
 
 .content h1,
diff --git a/css-progress/index.js b/css-progress/index.js
index 66002dd..af5931b 100644
--- a/css-progress/index.js
+++ b/css-progress/index.js
@@ -1,10 +1,10 @@
 const articleElem = document.querySelector("article");
 
 function setContainerWidth() {
-  const clientRect = articleElem.getBoundingClientRect();
+  const clientWidth = articleElem.getBoundingClientRect().width;
   articleElem.style.setProperty(
     "--container-width",
-    Math.floor(clientRect.width)
+    `${Math.floor(clientWidth)}px`
   );
 }