Progress

Determinate and indeterminate progress bar.

A progress bar, determinate or indeterminate, animated on the UI thread.

Installation

Progress ships with the library — no separate install.

import { Progress } from 'panelui-native';

Usage

<Progress value={uploaded} />
<Progress value={70} color="success" size="lg" />
<Progress indeterminate color="info" />

Variants

color

  • primary (default)
  • success
  • warning
  • destructive
  • info

size

  • sm
  • md (default)
  • lg

API Reference

Progress

PropTypeDefaultDescription
classNamestring
valuenumberProgress value, 0–100. Ignored when indeterminate is set.
indeterminatebooleanShow a looping animation for unknown-duration work.
indicatorClassNamestringExtra classes for the moving indicator.

Every part also accepts the underlying React Native props (ViewProps or TextProps) and a className for Tailwind utilities.

Notes

value is 0–100. With indeterminate the value is ignored and the bar loops.

On this page