ProgressBar

Component to visually represent progress or completion.
Supports determinate and indeterminate states, directional control, sizing, and status-based colors.

Usage Playground

Value

Width

Height

Color

Track Color

Indeterminate

Reverse Direction

Size

small

medium

large

Code Snippet

import { ProgressBar } from "@react-native-blossom-ui/components";

    function Usage() {
        return (
            <ProgressBar/>
        );
    }

Usage

function ProgressBarUsage() {
  return (
    <View>
      <ProgressBar value={60} />
    </View>
  )
}

Indeterminate

Enable indeterminate prop to show a continuous loading animation without a fixed progress value.

function ProgressBarIndeterminate() {
  return <ProgressBar indeterminate />
}

Direction

Use the reverseDirection prop to reverse the progress bar i.e. it will start from right by default.

function ProgressBarDirection() {
  return (
    <View>
      <ProgressBar indeterminate reverseDirection />
      <ProgressBar reverseDirection value={60} />
    </View>
  )
}

Status

function ProgressBarStatuses() {
  return (
    <View>
      <ProgressBar value={10} />
      <ProgressBar value={20} status="accent" />
      <ProgressBar value={30} status="success" />
      <ProgressBar value={40} status="info" />
      <ProgressBar value={50} status="warning" />
      <ProgressBar value={60} status="error" />
    </View>
  )
}

Sizes

function ProgressBarSizes() {
  return (
    <View>
      <ProgressBar value={10} size="small" />
      <ProgressBar value={20} size="medium" />
      <ProgressBar value={30} size="large" />
    </View>
  )
}

Custom

function ProgressBarCustom() {
  return (
    <View>
      <ProgressBar indeterminate value={50} color="blue" trackColor="cyan" />
      <ProgressBar value={20} color="red" trackColor="green" height={20} />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	BaseUIProps	--	Inherits properties from BaseUIProps
value	number	--	Progress value for the track color
width	number	--	Width of the progress bar
height	number	--	height of the progress bar
color	ColorValue	--	Background color of the unfilled color
trackColor	ColorValue	--	Main trackColor of the progress bar
indeterminate	boolean	--	Set it to true to have the infinite animation
reverseDirection	boolean	--	Reverse the direction of the progress bar
style	StyleProp<ViewStyle>	--	Style of the container view
status	BlossomStatus	primary	Status of the component to apply color variants'primary' | 'accent' | 'success' | 'info' | 'warning' | 'error'
size	BlossomSize	medium	Size of the component'small' | 'medium' | 'large'