Progress

55.00000000000001%

Usage

import { Progress } from "#/ui/components/Progress"

<Progress value={55} />

Value

You can pass any value between 0 and 100

89.125%

55.00000000000001%

33.33%

Any values over 100 or under 0 will automatically be adjusted to within the range

100%

indeterminate

Max

You can pass the max prop to change the maximum value to greater/less than 100

86.2%

60%

Indeterminate

If you don’t know the value, you can instead omit the value prop which will update the progress bar to be indeterminate

This is not the same as passing 0 to value, which is treated like a regular numeric value instead of an indeterminate state

indeterminate

Customization

Classes

You can pass a className prop to update the style of the progress bar. Behind the scenes the progress bar is a native <progress> element, (unless you’re using the indeterminate state)

55.00000000000001%