+ 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. +
++ This example shows a basic circular progress indicator with the default settings. No props are needed to render this simple loader, ideal for processes with unknown durations. +
+
+ The determinate progress indicator is controlled by the variant and value props, allowing you to display a specific percentage of progress. Set variant="determinate" and value between 0 and 100 to indicate completion.
+
+ These examples adjust the size of the circular progress indicator using the size prop. Set size to change the diameter of the circle, accommodating different layout requirements.
+
+ This variant modifies the width of the progress arc with the thickness prop. Use thickness to increase or decrease the line width, adding emphasis or subtlety to the indicator's appearance.
+
+ Various color options are applied to the circular progress using the color prop. Customize the appearance by setting color to values like "secondary," "success," or "inherit" to align with theme requirements.
+
+ By default, any children nested inside the Circular Progress will be centered, allowing icons or text to overlay seamlessly. +
+ + ++ 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. +
+ + +
+ 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.
+
+ 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.
+
+ Control the thickness of the circular progress arc using the thickness prop. This allows for customization of the loader's appearance. For instance:
+
+ 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. +
+ ++ 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
+ Below is a simple example of how to use the CircularProgress component. +
++ You can customize the appearance of the Circular Progress using + the `props` to define how the component + renders relative to its container element. +
+Determinate: Displays specific progress percentage
Indeterminate: Shows continuous animation for unknown duration processes
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