Progress

Display

A progress indicator in linear or circular variants. Supports label, percentage display, indeterminate animation, custom colors, and 3 sizes.

GitHub

Installation

bash

npx native-mate add progress

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Progress } from '~/components/ui/progress'

// Linear with label
<Progress value={65} showValue label="Upload progress" />

// Circular
<Progress variant="circular" value={42} showValue size="lg" />

// Indeterminate
<Progress value={0} indeterminate />

Props

Prop	Type	Default	Description
value	number	—	Progress 0–100.
variant	"linear" \| "circular"	"linear"	Bar or ring.
size	"sm" \| "md" \| "lg"	"md"	Track thickness / ring diameter.
color	string	—	Fill color. Defaults to theme primary.
trackColor	string	—	Background track color.
showValue	boolean	false	Renders percentage text (inside ring for circular).
label	string	—	Text label shown above the bar (linear only).
indeterminate	boolean	false	Shows an animated shimmer instead of a fixed value.
animated	boolean	true	Animate value transitions.

Example

tsx

import { Progress } from '~/components/ui/progress'
import { View } from 'react-native'

export function ProgressExample() {
  return (
    <View style={{ gap: 20, padding: 16 }}>
      <Progress value={72} showValue label="Storage used" color="#10b981" />
      <Progress value={45} showValue label="CPU" color="#f59e0b" size="sm" />
      <Progress value={0} indeterminate />
      <View style={{ flexDirection: 'row', gap: 20, alignItems: 'center' }}>
        <Progress variant="circular" value={72} showValue size="lg" />
        <Progress variant="circular" value={45} showValue size="md" color="#f59e0b" />
        <Progress variant="circular" value={90} showValue size="sm" color="#ef4444" />
      </View>
    </View>
  )
}

Textarea

Skeleton