CircularProgress

A circular progress indicator component for displaying loading states or progress values. Supports both determinate and indeterminate modes.

Basic Usage

import { CircularProgress } from 'uiplex';

<CircularProgress value={75} />
<CircularProgress value={50} />
<CircularProgress value={25} />

With Label

75%

50%

import { CircularProgress, CircularProgressLabel } from 'uiplex';

<CircularProgress value={75}>
  <CircularProgressLabel>75%</CircularProgressLabel>
</CircularProgress>

Sizes

<CircularProgress value={75} size={32} />
<CircularProgress value={75} size={48} />
<CircularProgress value={75} size={64} />
<CircularProgress value={75} size={96} />

Indeterminate

<CircularProgress isIndeterminate size={48} />
<CircularProgress isIndeterminate size={64} />
<CircularProgress isIndeterminate size={96} />

Custom Colors

<CircularProgress
  value={75}
  color="#2563eb"
  trackColor="#e0e7ff"
/>
<CircularProgress
  value={75}
  color="#059669"
  trackColor="#d1fae5"
/>

API Reference

Prop	Type	Default	Description
value	number	0	Progress value (0-100)
min	number	0	Minimum value
max	number	100	Maximum value
size	number \| string	48	Size of the progress circle
thickness	number	4	Thickness of the progress ring
color	string	"var(--accent-primary)"	Progress color
trackColor	string	"var(--bg-secondary)"	Track background color
isIndeterminate	boolean	false	Whether progress is indeterminate
children	React.ReactNode	-	Label content (usually CircularProgressLabel)
className	string	""	Additional CSS classes
style	React.CSSProperties	-	Inline styles