Circular Progress
The Circular Progress component displays a circular loading indicator that represents either determinate or indeterminate progress in your application. It's commonly used to show loading states, progress of operations, or completion percentages.
Circular Progress indicators inform users about the status of ongoing processes, such as loading an application, submitting a form, or updating data. They help maintain user engagement by providing visual feedback about the progress of operations.
Usage
The component can be used in two main variants:
Determinate: Shows definite progress with a specific percentage value
Indeterminate: Shows an animation indicating an unspecified wait time
Basic Example
Below is a simple example of how to use the CircularProgress component.
Key Features
You can customize the appearance of the Circular Progress using various props to define how the component renders relative to its container element.
Variants
Determinate: Displays specific progress percentage
Indeterminate: Shows continuous animation for unknown duration processes
Customization Options
Size: Adjustable diameter of the progress circle
Thickness: Controllable width of the progress arc
Color: Customizable colors for both track and progress
Value: Percentage complete (0-100) for determinate variant
