MiHCM
feedback/@mihcm/ui·v0.21.0·stable

ProgressCircle

Circular progress indicator for KPI cards and compact status summaries with semantic tones and value formatting.

ConfiguratorExamplesUsageAccessibilityApi

Overview

Circular progress indicator for KPI cards and compact status summaries with semantic tones and value formatting.

Use ProgressCircle from @mihcm/ui with MiHCM semantic tokens and Tailwind utility classes. Keep layout, spacing, color, and state styling token-based so the component remains responsive and dark-mode compatible.

Install and import

npx @mihcm/cli add ProgressCircle
import { ProgressCircle } from '@mihcm/ui/ProgressCircle';

Usage rules

  • Prefer the component API first, then extend with tokenized className overrides.
  • Do not use raw hex colors, inline styles, or local primitive forks.
  • Test mobile width, keyboard access, focus states, disabled states, and empty data.
  • Keep labels and descriptions visible or available through accessible names.