Back to docs
Component
Progress Ring
Circular progress with animated gradient arc and center label.
Install
npx shadcn@latest add @native-bits/progress-ringDependencies
react-native-reanimatedreact-native-svg
data-displaychartmobile
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| progress | number | - | Progress 0-100 |
| size | number | 96 | Ring diameter |
| animated | boolean | true | Animate value changes |
Usage
```tsx
import { progress-ring } from '@/components/native-bits/progress-ring'
<ProgressRing progress={72} size={96} animated />
```Source code
Loading...