Indicators
React loading and progress indicator components — circular spinners, determinate progress rings, and linear bars with configurable color and stroke
import { LoadingIndicator, CircularProgress, LoadingDots } from "@plexui/ui/components/Indicator";Examples
Overview
LoadingIndicator
Sizing & stroke
size
30
strokeWidth
2
Color
Destroying forever...
Duration
CircularProgress
Progress
Sizing & stroke
size
30
strokeWidth
2
Color
LoadingDots
Color
Reference
LoadingIndicator
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | — | Size in px (or use --indicator-size CSS variable) |
strokeWidth | number | — | Stroke width |
CircularProgress
| Prop | Type | Default | Description |
|---|---|---|---|
progress | number | — | Static progress 0–100 (disables animation) |
size | number | — | Diameter in px |
strokeWidth | number | — | Stroke thickness |
done | boolean | — | Completion state for animation |
trackColor | string | — | Track color (CSS variable or value) |
trackActiveColor | string | — | Active segment color |