Progress - Dreamy UI

Progress

Progress is used to display the progress of a task.

#

Import

Progress - The Progress component.

import { Progress } from "@dreamy-ui/react/rsc";

#

Usage

Use value prop to set the progress value 0 - 100. aria-label prop is required for accessibility.

<Progress value={50} aria-label="Progress" />

#

Sizes

You can set the size of the progress by using the size prop.

<VStack gap={5}>
    <Progress value={50} size="sm" aria-label="Progress" />
    <Progress value={50} size="md" aria-label="Progress" />
    <Progress value={50} size="lg" aria-label="Progress" />
</VStack>

#

Scheme

You can set the color of the progress by using the scheme prop.

<VStack gap={5} full>
    <Progress scheme="primary" value={50} aria-label="Progress" />
    <Progress scheme="secondary" value={50} aria-label="Progress" />
    <Progress scheme="success" value={50} aria-label="Progress" />
    <Progress scheme="warning" value={50} aria-label="Progress" />
    <Progress scheme="error" value={50} aria-label="Progress" />
    <Progress scheme="info" value={50} aria-label="Progress" />
    <Progress scheme="none" value={50} aria-label="Progress" />
</VStack>

#

Indeterminate Progress

You can make the progress indeterminate by using the isIndeterminate prop. You can customize speed prop to change the speed of the indeterminate animation.

<Progress isIndeterminate speed="0.8s" aria-label="Progress" />

Progress Circular

Radio Card