Issue #3488464: Add --refreshless-progress-bar-computed-value f/ themes.

components/progress-bar/progress-bar.css

@@ -57,6 +57,22 @@
     calc(var(--refreshless-progress-bar-transition-duration) / 2)
     ease-in;
 
+  /**
+   * Progress bar computed value.
+   *
+   * Unlike --refreshless-progress-bar-value, which is a float between 0 and 1
+   * (inclusive), this is a percent, and it also takes
+   * --refreshless-progress-bar-start into account. This is intended to be used
+   * as the cleaned up and UI-ready value. The default implementation below sets
+   * this as the value of the width property, but themes can use this however
+   * they choose.
+   */
+  --refreshless-progress-bar-computed-value: calc(
+    var(--refreshless-progress-bar-value, 0) * (
+      100% - var(--refreshless-progress-bar-start)
+    ) + var(--refreshless-progress-bar-start)
+  );
+
 }
 
 .refreshless-document-progress-bar {
@@ -70,11 +86,7 @@
 
   height: var(--refreshless-progress-bar-thickness);
 
-  width: calc(
-    var(--refreshless-progress-bar-value) * (
-      100% - var(--refreshless-progress-bar-start)
-    ) + var(--refreshless-progress-bar-start)
-  );
+  width: var(--refreshless-progress-bar-computed-value);
 
   background-color: var(--refreshless-progress-bar-colour);