Progress Bar

The Progress component is a progress bar, that indicates percentage completion of some activity. It is not tied to the particular task being done. It could be used as a download completion indicator, or to indicate a user's progress through a multi-step flow or form.

<div>
  <Progress value={20} />
  <Progress value={40} />
  <Progress value={60} />
  <Progress value={80} />
  <Progress value={100} />
  <Progress value={90} primary>90% primary</Progress>
  <Progress value={50} success>50% success</Progress>
  <Progress value={40} warning>40% warning</Progress>
  <Progress value={30} alert>30% alert</Progress>
  <Progress min={1} max={5} value={4}>4 on a 5 point scale</Progress>
</div>

<div>
  <Progress value={20} />
  <Progress value={40} />
  <Progress value={60} />
  <Progress value={80} />
  <Progress value={100} />
  <Progress value={90} primary>90% primary</Progress>
  <Progress value={50} success>50% success</Progress>
  <Progress value={40} warning>40% warning</Progress>
  <Progress value={30} alert>30% alert</Progress>
  <Progress min={1} max={5} value={4}>4 on a 5 point scale</Progress>
</div>