REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Data Display

CircularProgress

A circular progress indicator showing completion percentage.

Example

Preview

Code

Props

CircularProgress Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the circular progress container.

value *

number

—

The progress value from 0 to 100.

size

'sm' | 'md' | 'lg' | 'xl'

'md'

Controls the diameter of the circular progress.

CircularProgressLabel Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the label inside the circle.

Usage Guidelines

When to use

Use CircularProgress to display a visual percentage or completion state in a compact circular form.

Best practices

•

Always pair with CircularProgressLabel to show the numeric value.

•

Use semantic colors to indicate positive (green) or warning (yellow) states.

•

Consider Progress (linear) for space-constrained layouts.

Accessibility

CircularProgress exposes its value to screen readers via accessibilityValue. Announce progress changes for dynamic updates.

Related Components

Progress

A compound progress bar component that visually indicates the completion percentage of an operation.

Spinner

An animated loading indicator to communicate that an operation is in progress.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License