Progress Circle

Overview

ProgressCircle is a small SVG circular progress indicator used inline where a horizontal bar would be too large or visually heavy.

It renders a 20×20 viewBox ring with an animated stroke fill based on a 0–100 percentage.

Use ProgressCircle for compact row-level progress, avatar overlays, and tight toolbar indicators. For full-width linear progress, use ProgressBar.

Basic Usage

import { ProgressCircle } from '@fsai/shared-ui';

<ProgressCircle percentage={65} className="h-5 w-5" />

Custom Colors

<ProgressCircle
  percentage={40}
  progressColor="#5381EB"
  backgroundColor="#5381EB"
  className="h-4 w-4"
/>

The background ring uses the same color at 20% opacity. The progress ring uses the full progressColor.

Props

Prop	Type	Default	Description
`percentage`	`number`	—	Required. Completion value between 0 and 100.
`className`	`string`	—	Size and layout classes (typically `h-N w-N`).
`progressColor`	`string`	`'#191919'`	Stroke color for the filled arc.
`backgroundColor`	`string`	`'#191919'`	Stroke color for the background ring (rendered at 20% opacity).

Important Conventions

Size is controlled entirely via className on the SVG element.
The stroke animates with a 0.35s ease transition when percentage changes.
The ring starts at the top (12 o'clock) via a -90° rotation.
There is no built-in aria role — add surrounding context or an accessible label when the percentage carries meaning.

Guidelines

Do use ProgressCircle for compact inline progress in rows, badges, and toolbars
Do size with className such as h-4 w-4 or h-5 w-5
Don't use ProgressCircle for primary progress display in forms or dashboards — use ProgressBar
Don't rely on it alone for accessibility-critical progress — pair with visible text when needed