progress() interpolation

Try: Resize the window. When progress() is supported, the inner bar width tracks 100vw between 320px and 900px as a 0–1 ratio scaled to 100%. Otherwise it stays at 40% (fallback).

This is different from a scroll reading bar—progress() needs three values of the same type (length, number, or %), not scroll position. See MDN.

.fill {
  width: 40%; /* fallback */
}
@supports (width: calc(progress(100px, 100px, 200px) * 1px)) {
  .fill {
    width: calc(progress(100vw, 320px, 900px) * 100%);
    max-width: 100%;
  }
}