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.