Progress

A horizontal bar to represent the completion progress of a task

import { Progress } from 'theme-ui'

<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' />