ProgressBar

ProgressBar displays progress completion or loading state with a linear indicator. Supports determinate values and indeterminate animation.

Preview

Basic Usage

25%

50%

75%

100%

<ProgressBar value={25} />
<ProgressBar value={50} />
<ProgressBar value={75} />
<ProgressBar value={100} />

Variants

Default

Primary gold color for general progress.

<ProgressBar value={60} />

Gold

Accent gold for highlighted progress.

<ProgressBar value={60} variant="gold" />

Success

Indicates completion or positive outcome.

<ProgressBar value={100} variant="success" />

Warning

Indicates attention needed.

<ProgressBar value={45} variant="warning" />

Sizes

Size	Height	Usage
`sm`	4px	Subtle progress indicators
`md`	8px	Default
`lg`	12px	Prominent progress displays

Indeterminate

For loading states where progress is unknown.

<ProgressBar indeterminate />
<ProgressBar indeterminate variant="gold" />

Animation

Progress changes animate smoothly by default.

// Animated (default)
<ProgressBar value={progress} />

// Instant updates
<ProgressBar value={progress} animated={false} />

API Reference

Props

Prop	Type	Default	Description
`value`	`number`	Required	Progress 0-100
`variant`	`'default' \| 'success' \| 'warning' \| 'gold'`	`'default'`	Color variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Bar height
`animated`	`boolean`	`true`	Animate changes
`indeterminate`	`boolean`	`false`	Loading animation
`style`	`ViewStyle`	-	Custom styles
`accessibilityLabel`	`string`	`'Progress'`	A11y label

Complete Example

import { ProgressBar, Card, Badge } from '@synchronicity/react-native';
import { View, Text } from 'react-native';

function LearningProgress({ completed, total }) {
  const percentage = Math.round((completed / total) * 100);
  const isComplete = percentage === 100;

  return (
    <Card variant="outlined">
      <View style={styles.header}>
        <Text style={styles.title}>Learning Progress</Text>
        <Badge variant={isComplete ? 'success' : 'gold'}>
          {isComplete ? 'Complete' : `${percentage}%`}
        </Badge>
      </View>

      <ProgressBar
        value={percentage}
        variant={isComplete ? 'success' : 'gold'}
        size="md"
        accessibilityLabel={`Learning progress: ${percentage}% complete`}
      />

      <Text style={styles.subtitle}>
        {completed} of {total} trigrams learned
      </Text>
    </Card>
  );
}