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

Attribute	Type	Value	Default Value	Description
rounded	boolean	true/false	true	Border radius. Set to false for square edges
percent	string/number	e.g. 50	0	The percentage from 0-100 to fill the space in the progress bar
animate	boolean	true/false	undefined	Set's a pulsing animation to percentage
size	string	sm/md/lg	md	Size of progess bar
color	string	e.g. red	blue	Color of percentage of progress bar
shade	string	e.g. 700	500	Change the shade of the percentage of the progress bar