Skip to main content

Progress

Implementation#

import { Progress } from "slipstream-ui";
const Example = () => <Progress />;

Percentage#

Example
<Progress percent={50} />

Size#

Example
<Progress percent={25} size="sm" />
<Progress percent={50} size="md" />
<Progress percent={75} size="lg" />

Color#

Example
<Progress color="red" />
<Progress color="red" shade="900" />

Rounded#

Remove border radius by passing false to the rounded prop.

Example
<Progress rounded={false} />

Animation#

Example
<Progress animate />

Props#

AttributeTypeValueDefault ValueDescription
roundedbooleantrue/falsetrueBorder radius. Set to false for square edges
percentstring/numbere.g. 500The percentage from 0-100 to fill the space in the progress bar
animatebooleantrue/falseundefinedSet's a pulsing animation to percentage
sizestringsm/md/lgmdSize of progess bar
colorstringe.g. redblueColor of percentage of progress bar
shadestringe.g. 700500Change the shade of the percentage of the progress bar