CircularProgress

Glowup

FEEDBACK · 68 / 89

CircularProgress

CircularProgress — a Material You feedback component for React Native and web.

󱀫

packages/ui/src/components/Progress/CircularProgress.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

Properties

4 controls

Size

Stroke Width

Duration (ms)

Color

Usage

CircularProgress.tsx

Variants

The states and shapes this component is meant to be used in.

Sizes

20 — inline

32 — list row

48 — default

72 — full page

Stroke weights

strokeWidth 2

strokeWidth 4

strokeWidth 8

Colors

primary

secondary

tertiary

error

Loading pane

Syncing your workspace

Fetching 42 projects and 1,204 components

Inline with label

Checking availability…

Verifying payment method…

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

8 on CircularProgressProps

accessibilityLabel

string

color

string

Indicator colour. Defaults to `primary`.

decorative

boolean

default: false

Hides it from assistive tech when something else announces the progress.

duration

number

default: 1000

Indeterminate only: one revolution, in ms.

progress

number

Completion from 0 to 1. Set, the ring fills to it over a track; unset, the indicator spins (indeterminate).

size

number

default: 48

strokeWidth

number

default: 4

testID

string