CircularProgress
This component renders a circular progress indicator.
Import
import {CircularProgress} from "cui-react";
Example
Render a circular progress indicator: Visual:
75%
64%
Code:
<div className="flex items-center rounded-md bg-slate-400 h-32 p-4 space-x-4 ">
<CircularProgress value={75} size={100} strokeWidth={10} color="text-blue-500 dark:text-blue-600" />
<CircularProgress value={64} size={100} strokeWidth={8} color="text-red-500 dark:text-red-600" />
</div>
Customizing
You can customize the CircularProgress using the following props:
- size (optional): Diameter of the circular progress indicator. Defaults to 80.
- strokeWidth (optional): Thickness of the stroke. Defaults to 6.
- value (required): Progress value from 0 to 100.
- color (optional): Color of the progress indicator. Defaults to "text-blue-500 dark:text-blue-400".
- className (optional): Additional CSS classes to apply.
This example renders a circular progress indicator with a size of 120, stroke width of 10, and green color variant.
Props
-
size
- Type: number
- Description: Diameter of the circular progress indicator.
-
strokeWidth
- Type: number
- Description: Thickness of the stroke.
-
**`value
- Type: number`**
- Description: Progress value from 0 to 100.
-
color
- Type: string
- Description: Color of the progress indicator.
-
className
- Type: string
- Description: Additional CSS classes to apply.