Progress

Range input element

import { Progress } from 'theme-ui'

50%

<Progress max={1} value={1/2}>
  50%
</Progress>
<Progress max={1} value={1/2}>
  50%
</Progress>

Variants

Progress variants can be defined anywhere in the theme object.

// example theme variants
{
  styles: {
    progress: {
      color: 'red',
    },
  },
}
// <Progress variant='styles.progress' />