Progress Circular - Dreamy UI

Progress Circular

Progress Circular is used to display the progress of a task in a circular shape.

#

Import

ProgressCircular - The Progress Circular component.

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

#

Usage

Use value prop to set the progress value.

<ProgressCircular value={69} />

#

Sizes

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

<Flex col gap={5}>
    <ProgressCircular value={69} size="xs" />
    <ProgressCircular value={69} size="sm" />
    <ProgressCircular value={69} size="md" />
    <ProgressCircular value={69} size="lg" />
    <ProgressCircular value={69} size="xl" />
</Flex>

#

Scheme

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

<Flex col gap={5}>
    <ProgressCircular scheme="primary" value={21} />
    <ProgressCircular scheme="secondary" value={37} />
    <ProgressCircular scheme="success" value={42} />
    <ProgressCircular scheme="warning" value={10} />
    <ProgressCircular scheme="error" value={100} />
    <ProgressCircular scheme="info" value={50} />
</Flex>

#

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.

<ProgressCircular isIndeterminate />

#

Show value label

You can show the value label by using the showValue prop. Use valueLabel prop to set the value label.

You can also set the formatOptions prop to format the value label.

69%

$0.69

<ProgressCircular showValueLabel value={69} />
<ProgressCircular showValueLabel value={69} valueLabel="0" />
<ProgressCircular showValueLabel value={69} formatOptions={{ style: "currency", currency: "USD" }} />

#

Label

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

Downloading...

<ProgressCircular label="Downloading..." value={69} />

#

Min and Max value

You can set the min and max value of the progress by using the minValue and maxValue prop.

<ProgressCircular minValue={21} maxValue={37} value={29} />

Portal

Progress