Progress

A linear bar and a circular ring, both driven by the same 0-to-1 value with an animated fill.

ReanimatedSVGSource

Prerequisites

ProgressCircle renders its ring with SVG, so react-native-svg comes along with Reanimated.


npx expo install react-native-reanimated react-native-svg

Install


npx @rslab/cli add progress

Usage

ProgressBar


import { ProgressBar } from '@/components/ui/ProgressBar';



<ProgressBar value={uploadProgress} />

<ProgressBar value={0.4} color="#a855f7" height={10} />

ProgressCircle


import { ProgressCircle } from '@/components/ui/ProgressCircle';



<ProgressCircle value={uploadProgress} />

<ProgressCircle value={0.75} color="#22c55e" size={72} strokeWidth={8} />

Props

ProgressBar

PropTypeDefault

value

number

-

Progress from 0 to 1. Clamped before it reaches the animation.

color?

string

'#171717'

Fill color.

height?

number

6

className?

string

-

Extend or override the track.

ProgressCircle

PropTypeDefault

value

number

-

Progress from 0 to 1. Clamped before it reaches the animation.

size?

number

56

Diameter in px.

strokeWidth?

number

6

color?

string

'#171717'

Fill stroke color.

trackColor?

string

-

Background ring color. Defaults to a neutral tone based on color scheme.

className?

string

-

Extend or override the outer wrapper.

How it works

ProgressBar animates its fill's width as a percentage string with a plain timing animation, a standard, low-overhead way to animate a progress fill. No spring, since progress updates tend to happen repeatedly as real work completes, and spring overshoot would look wrong on a fill that should only ever move forward.
ProgressCircle uses an SVG circle with a fixed stroke-dasharray equal to the full circumference, then animates the stroke-dashoffset to reveal the fill, the standard SVG circular-progress recipe. It's rotated -90 degrees around its own center so the fill starts at 12 o'clock instead of 3 o'clock.
Both clamp their input. A shared clamp01 guards against a value prop drifting outside 0 to 1 (for instance, a division that briefly exceeds 1) before it ever reaches the animation.

Tuning

The 260ms fill timing and its ease-out curve, shared by both, raise the duration for a calmer fill on something like a big onboarding progress indicator.
ProgressCircle's -90deg rotation: change the starting angle of the fill if 12 o'clock isn't what you want.

See exactly how this works with an RSLAB subscription.

Get Pro

Progress

On this page