Used to display progress in a circular format, providing visual feedback on ongoing processes or statuses. The CircularProgress component is highly customizable, supporting different sizes and dynamic values to fit various use cases.

Usage

Import

import { CircularProgress } from '@passfort/castle'
content_copy
Copy

Basic Usage

Display a circular progress indicator with a specific value.

<Row>
  <CircularProgress value={66} />
</Row>
<Row>
  <CircularProgress value={66} />
</Row>
content_copy
Copy
live example

Small Size

Render a smaller variant of the circular progress indicator for compact interfaces.

<Row>
  <CircularProgress value={66} size="sm" />
</Row>
<Row>
  <CircularProgress value={66} size="sm" />
</Row>
content_copy
Copy
live example

Undefined value

Show a circular progress indicator with undefined values by not passing the value prop.

<Row gap={4} alignItems="center">
  <CircularProgress />
  <CircularProgress size="sm" />
</Row>
<Row gap={4} alignItems="center">
  <CircularProgress />
  <CircularProgress size="sm" />
</Row>
content_copy
Copy
live example