Progress Circle

Preview

About

Circular progress indicator (KasyProgressCircle). Determinate (value between 0 and 1, the arc fills starting from the top) or indeterminate (value null, spins continuously).

• size: sm (20px) / md (28px, default) / lg (36px) — circle diameter; stroke thickness scales along with it (2/3/4px).
• variant: primary (default) / neutral / success / warning / danger — semantic color of the arc.
• color: explicit color, overrides variant.
• label: optional text shown to the right of the circle.
• semanticsLabel: accessibility label (defaults to the percentage when determinate).

Note: when determinate, it shows a neutral track behind the arc; indeterminate uses KasySpinner internally, with no track.

Last updated on 08/23/2026