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.
Proper usage of the Circular Progress component can enhance user experience by visually indicating progress status. Below are some guidelines to ensure effective implementation.
Usage
To use the Circular Progress component, include it in your layout with the desired variant prop to specify whether it should be determinate or indeterminate. For example:
variant="indeterminate"for continuous loading.variant="determinate"for specific progress indication.
The value prop is required for determinate progress to indicate how far along the task is, ranging from 0 to 100.
Sizing
Adjust the size of the Circular Progress component using the size prop. For example, set size={60} to increase the diameter of the circular loader.
Thickness
Control the thickness of the circular progress arc using the thickness prop. This allows for customization of the loader's appearance.
Colors
Customize the color of the Circular Progress component using the color prop. Available colors include primary, secondary, success, error, warning, and info to match your design system.
