Loading Indicator

Feedback & Status

LoadingIndicator

Material 3 expressive loading indicator with morphing shapes and smooth animations.

Usage

Display indeterminate progress with engaging visual feedback.

Highlights

Morphing shape animation with 7 distinct shapes
Contained variant with background
Customizable size and color

When to use it

You need visually engaging loading feedback for async operations.
Standard spinner does not convey the premium feel of your app.

Related components

ActivityIndicatorButton

Examples

Basic Usage

import { LoadingIndicator } from 'react-native-molecules/components/LoadingIndicator';

export default function Example() {
  return <LoadingIndicator />;
}

Sizes

import { View } from 'react-native';
import { LoadingIndicator } from 'react-native-molecules/components/LoadingIndicator';

export default function Example() {
  return (
      <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
          <LoadingIndicator size="sm" />
          <LoadingIndicator size="md" />
          <LoadingIndicator size={64} />
      </View>
  );
}

Custom Colors

Use theme color tokens or custom color values.

import { View } from 'react-native';
import { LoadingIndicator } from 'react-native-molecules/components/LoadingIndicator';

export default function Example() {
  return (
      <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
          <LoadingIndicator color="primary" />
          <LoadingIndicator color="secondary" />
          <LoadingIndicator color="tertiary" />
          <LoadingIndicator color="error" />
          <LoadingIndicator color="#FF5722" />
      </View>
  );
}

Contained Variant

The contained variant adds a circular background using the primaryContainer color.

import { View } from 'react-native';
import { LoadingIndicator } from 'react-native-molecules/components/LoadingIndicator';

export default function Example() {
  return (
      <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
          <LoadingIndicator variant="default" />
          <LoadingIndicator variant="contained" />
      </View>
  );
}

Custom Background with Style

Use the style prop to customize the background, padding, or other container styles.

import { View } from 'react-native';
import { LoadingIndicator } from 'react-native-molecules/components/LoadingIndicator';

export default function Example() {
  return (
      <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
          {/* Custom background color */}
          <LoadingIndicator 
              color="onPrimary"
              style={{ 
                  backgroundColor: '#6750A4',
                  padding: 12,
                  borderRadius: 50,
              }} 
          />
          
          {/* With border */}
          <LoadingIndicator 
              style={{ 
                  backgroundColor: '#F5F5F5',
                  padding: 8,
                  borderRadius: 50,
                  borderWidth: 2,
                  borderColor: '#E0E0E0',
              }} 
          />
          
          {/* Square background */}
          <LoadingIndicator 
              style={{ 
                  backgroundColor: '#E8DEF8',
                  padding: 16,
                  borderRadius: 12,
              }} 
          />
      </View>
  );
}

Controlled Animation

Control the animation with the animating prop.

import { useState } from 'react';
import { View } from 'react-native';
import { Button } from 'react-native-molecules/components/Button';
import { LoadingIndicator } from 'react-native-molecules/components/LoadingIndicator';

export default function Example() {
  const [isAnimating, setIsAnimating] = useState(true);
  
  return (
      <View style={{ gap: 16, alignItems: 'center' }}>
          <LoadingIndicator animating={isAnimating} />
          <Button 
              variant="contained" 
              onPress={() => setIsAnimating(!isAnimating)}
          >
              <Button.Text>{isAnimating ? 'Stop' : 'Start'}</Button.Text>
          </Button>
      </View>
  );
}

Prop	Type	Default	Description
`animating`	`boolean \| undefined`	—	Whether the indicator is animating. When false, the indicator is hidden.
`color`	`string \| undefined`	—	Color of the indicator. Accepts theme color tokens (e.g., 'primary', 'secondary', 'error') or CSS color values.
`size`	`number \| "sm" \| "md" \| undefined`	—	Size of the indicator. 'sm' = 24px, 'md' = 38px, or a custom number.
`variant`	`"contained" \| "default" \| undefined`	—	Visual variant. 'contained' adds a circular background using primaryContainer color.
`innerContainerProps`	`ViewProps \| undefined`	—	Props passed to the inner animated container.

Defined in react-native-molecules/components/LoadingIndicator