Circularprogress
Circular progress indicators provide visual feedback about ongoing processes, helping users understand that their request is being processed. They can show either determinate progress (specific completion percentage) or indeterminate progress (unknown duration).
The CircularProgress component is essential for communicating system status to users. It provides immediate feedback during loading states, file uploads, data processing, and other time-consuming operations.
Basic Circular Progress
A simple indeterminate circular progress indicator that shows continuous loading. This is the default behavior when no variant or value props are provided.
Determinate Progress
The determinate variant shows specific progress completion using the value prop (0-100). This variant is perfect for file uploads, downloads, or any process with measurable progress.
Size Variations
Circular progress indicators can be scaled to different sizes using the size prop. This flexibility allows them to fit various layout requirements, from small inline indicators to prominent loading states.
Thickness Variations
The thickness prop controls the width of the progress arc, allowing you to create subtle or bold visual emphasis depending on your design requirements. Thicker lines provide more visual weight and prominence.
Color Options
Circular progress indicators support various color themes to match your application's design system. Colors can convey different meanings or states, such as success, warning, or error conditions.