Add improvements to CSS progress() demo (#314)

Author: chrisdavidmills

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,

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`
   );
 }