Circularprogress
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
