Progress

Display a bar to indicate percent completion.

Progress

Show percent completion with a progress bar

Progress: 60

Features

Sizable, themeable, animatable.

Compound component API for complete control.

Adheres to the progressbar role requirements

Installation

Progress is already installed in tamagui, or you can install it independently:

yarn
npm
bun
pnpm
yarn add @tamagui/progress

Usage

The value property controls the percent, but you can override it by adjusting the x property.

import { Button, Progress } from 'tamagui'

export default () => (
  <Progress value={60}>
    <Progress.Indicator animation="bouncy" />
  </Progress>
)

API Reference

Progress

Progress extends ThemeableStack, getting Tamagui standard props, plus:

Props

size

"small" | "large"

value

number | null

Control the percent progress.

max

number

Progress.Indicator

Progress.Indicator extends ThemeableStack, getting Tamagui standard props.

Edit this page on GitHub.