← All Components

Loader

Bouncing dots loader with configurable count, speed, and color variants.

Variants

default
secondary
outline

Sizes

sm
md
lg

Custom Count

2 dots
5 dots

Use Case: Button Loading

Props

PropTypeDescription
variant"default" | "secondary" | "outline"Dot color scheme
size"sm" | "md" | "lg"Dot size
countnumberNumber of bouncing dots (default: 3)
durationnumberAnimation duration in seconds (default: 0.5)
delayStepnumberDelay between dots in ms (default: 100)
classNamestringAdditional classes on the root element

Usage

<Loader /> <Loader variant="secondary" size="lg" /> <Loader count={5} duration={0.8} delayStep={150} />