rslabdocs

Loading Dots

Three dots pulsing in a staggered loop, a typing-indicator style loading state.

ReanimatedNativeWindSource

Prerequisites

Loading Dots only needs Reanimated for the pulse loop.


npx expo install react-native-reanimated

Install


npx @rslab/cli add loading-dots

Usage


import { LoadingDots } from '@/components/ui/LoadingDots';



<LoadingDots />

<LoadingDots size={12} gap={10} />

Drop it wherever a request is quietly still in flight, a chat bubble, a disabled button, a list that's still fetching:

<View className="flex-row items-center gap-2 rounded-2xl bg-neutral-100 px-4 py-3 dark:bg-neutral-800">
  <LoadingDots color="#f97316" />
</View>

Props

PropTypeDefault
size?
number
8

Dot diameter in px.

color?
string
theme-aware neutral ('#525252' light / '#a3a3a3' dark)

Overrides the automatic light/dark neutral, useful against a colored background.

gap?
number
6

Spacing between dots in px.

className?
string
-

Extend or override the outer row.

See exactly how this works with an RSLAB subscription.

Get Pro

On this page