ProgressBar – Once UI

ProgressBar shows how far along something is. The bar fills to value between min and max, and animates over one second when the value changes. Screen readers read it as a progress bar with its value. See the web ProgressBar page for the web version.

ProgressBar

import { ProgressBar } from "@once-ui-system/native";

export function Upload() {
return <ProgressBar value={64} />;
}

Label

The label shows the value with a percent sign, under the bar by default. labelPosition moves it to the top, left or right. showLabel={false} hides it.

Label

import { Column, ProgressBar } from "@once-ui-system/native";

export function Labels() {
return (
  <Column gap="24">
    <ProgressBar value={30} labelPosition="top" />
    <ProgressBar value={50} labelPosition="right" />
    <ProgressBar value={70} showLabel={false} />
  </Column>
);
}

Range and color

min and max set the range. The label shows value with a % sign, as on the web. barBackground sets the bar color, brand-strong by default.

Range and color

import { Column, ProgressBar, Text } from "@once-ui-system/native";

export function Stamps({ stamps }: { stamps: number }) {
return (
  <Column gap="8">
    <Text variant="label-default-s">{stamps} of 10 stamps</Text>
    <ProgressBar value={stamps} max={10} showLabel={false} barBackground="success-medium" />
  </Column>
);
}

API reference

ProgressBar does not take Flex props. It fills the width; use style for margins.

Prop	Type	Default	Description
value	number		The current value. Required.
min	number	0	The start of the range.
max	number	100	The end of the range.
showLabel	boolean	true	Shows the value as a label.
labelPosition	"top" \| "bottom" \| "left" \| "right"	"bottom"	Where the label sits.
barBackground	Colors	"brand-strong"	The bar's solid color.
style	ViewStyle		Style for the outer view.