Progress

<Highlights features={[ 'Sizable, themeable, animatable.', 'Compound component API for complete control.', <span> Adheres to the{' '} <Link href="https://www.w3.org/TR/wai-aria-1.2/#progressbar"> progressbar role requirements </Link> </span>, ]} />

Installation

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

npm install @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 transition="bouncy" />
  </Progress>
)

API Reference

Progress

Progress extends ThemeableStack, getting Tamagui standard props, plus:

<PropsTable data={[ { name: 'size', required: false, type: '"small" | "large"', description: Size preset for the progress bar., }, { name: 'value', required: false, type: 'number | null', description: Controls the percent progress., }, { name: 'max', required: false, type: 'number', description: Maximum value for calculating the percentage., }, { name: 'unstyled', required: false, type: 'boolean', description: When true, removes all default styles., }, ]} />

Progress.Indicator

Progress.Indicator extends ThemeableStack, getting Tamagui standard props.

<PropsTable data={[ { name: 'unstyled', required: false, type: 'boolean', description: When true, removes all default styles., }, ]} />