Progress

<ProgressBar value={0} />

<ProgressCircle value={0} />

<WrapperVertical>
  <ProgressBar value={0} />
  <ProgressBar value={25} />
  <ProgressBar value={50} />
  <ProgressBar value={75} />
  <ProgressBar value={100} />
</WrapperVertical>

<WrapperHorizontal>
  <ProgressCircle value={0} />
  <ProgressCircle value={25} />
  <ProgressCircle value={50} />
  <ProgressCircle value={75} />
  <ProgressCircle value={100} />
</WrapperHorizontal>

<ProgressBar value={100} />

<ProgressCircle value={100} />

<ProgressBar value={100} failed />

<ProgressCircle value={100} failed />

<WrapperHorizontal>
  <ProgressCircle value={50} circleSize={0} />
  <ProgressCircle value={50} circleSize={25} />
  <ProgressCircle value={50} circleSize={50} />
  <ProgressCircle value={50} circleSize={75} />
  <ProgressCircle value={50} circleSize={100} />
</WrapperHorizontal>

<WrapperVertical>
  <ProgressBar value={25} transitionColors={['pink', 'violet', 'purple']} />
  <ProgressBar value={50} transitionColors={['pink', 'violet', 'purple']} />
  <ProgressBar value={75} transitionColors={['pink', 'violet', 'purple']} />
</WrapperVertical>

<WrapperHorizontal>
  <ProgressCircle
    value={25}
    transitionColors={['pink', 'violet', 'purple']}
  />
  <ProgressCircle
    value={50}
    transitionColors={['pink', 'violet', 'purple']}
  />
  <ProgressCircle
    value={75}
    transitionColors={['pink', 'violet', 'purple']}
  />
</WrapperHorizontal>