Circular Progress

RingProgress displays a circular SVG-based progress indicator with determinate and indeterminate modes.

Basic Usage

import { RingProgress } from "@paramanu/feedback-react"

export default function App() {
return <RingProgress value={60} />
}

<div class="pm-ring-progress pm-ring-progress--md pm-ring-progress--primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<svg class="pm-ring-progress__svg" viewBox="0 0 44 44" width="48" height="48">
  <circle class="pm-ring-progress__track" cx="22" cy="22" r="20" fill="none" stroke-width="4"/>
  <circle class="pm-ring-progress__fill" cx="22" cy="22" r="20" fill="none" stroke-width="4"/>
</svg>
</div>

Accessibility

Uses role="progressbar" with ARIA value attributes
Indeterminate mode omits aria-valuenow

Best Practices

Use for compact progress indicators in limited space
Pair with text labels for longer operations
Use indeterminate for unknown durations

React Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Circle diameter
`variant`	`"primary" \| "success" \| "warning" \| "danger"`	`"primary"`	Stroke color
`value`	`number`	`0`	Current value
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`indeterminate`	`boolean`	`false`	Spinning animation
`thickness`	`number`	`4`	Stroke width