How do you handle the indeterminate state of a Progress component?

[foxaltus]

Unlike with the native HTML5 <progress> element, we don't get an animation when the Progress component doesn't have a value.

Compare: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
with: https://theme-ui.com/components/progress

How do you handle the indeterminate state of a Progress component? The expectation is that the bar shows an infinite animation.

[foxaltus]

So I ended up adding this style, which shows an infinite animation when the progress bar has no value (50%-width bar, moving from left to right). Tested on Chrome and FF.

<Progress
  sx={{
    ':indeterminate': {
      backgroundImage:
        'linear-gradient(90deg, currentColor 0%, currentColor 25%, transparent 25%, transparent 100%)',
      backgroundSize: '200% 100%',
      animation: `${keyframes({
        from: { backgroundPositionX: '50%' },
        to: { backgroundPositionX: '-100%' },
      })} 1s linear infinite`,
    },
    ':indeterminate::-moz-progress-bar': {
      width: 0,
    },
  }}
/>

I wish the Progress component supported the indeterminate state natively though...