LoadingDots

An animated row of bouncing dots. Fully configurable dot count, size, spacing, and speed — with a slot to replace each dot with a custom element.

Overview

LoadingDots renders a row of dots that animate with a sequential bounce, communicating an ongoing operation in a compact, friendly form. Every visual dimension — count, size, spacing, bounce height, and scale — is a prop. The slots.dot prop lets you replace each dot with any element (icon, image, custom shape) while keeping the animation.

Import

import { LoadingDots } from '@unflow.io/ui/components/LoadingDots';

Props

Prop	Type	Default	Description
`speed`	`'slow' \| 'normal' \| 'fast'`	`'normal'`	Animation speed
`dotsCount`	`number`	`4`	Number of dots
`size`	`number`	`6`	Diameter of each dot in px
`spacing`	`number`	`6`	Gap between dots in px
`bounceHeight`	`number`	`2`	Upward translation in rem units
`scaleFactor`	`number`	`1.5`	Scale multiplier at peak of bounce

All standard HTML element props are forwarded.

Speeds

Slow

Normal

Fast

<LoadingDots speed="slow"   size={8} dotsCount={4} spacing={6} />
<LoadingDots speed="normal" size={8} dotsCount={4} spacing={6} />
<LoadingDots speed="fast"   size={8} dotsCount={4} spacing={6} />

Custom dots

const colors = ['#6366f1', '#8b5cf6', '#a78bfa', '#c4b5fd'];

<LoadingDots
  speed="normal"
  size={12}
  dotsCount={4}
  spacing={8}
  scaleFactor={1.4}
  slots={{
    dot: (dotProps, index) => (
      <span
        {...dotProps}
        style={{
          ...dotProps.style,
          backgroundColor: colors[index % colors.length],
          borderRadius: '4px',
        }}
      />
    ),
  }}
/>

slots.dot receives dotProps (class, style, key) and the dot index. Spread dotProps onto your element to preserve the animation CSS variables, then customize shape and color freely.

Customization (slotProps)

Slot	Props	Description
`dot`	`HTMLSpanElement` props	Applied to each dot element

Accessibility

Add aria-label or aria-labelledby to describe what is loading; e.g. aria-label="Loading results".
Consider pairing with a visually-hidden <span role="status"> that announces completion when the loading state ends.