LinearLoading

Overview

LinearLoading renders a fixed-width track with an animated thumb that slides back and forth indefinitely. It communicates an operation in progress without a known duration — use it for page loads, data fetches, or background saves.

Three speed presets map to Tailwind animation utilities. The slots.thumb prop lets you replace the default solid thumb with any custom element while keeping the animation.

Import

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

Props

All standard HTML element props are forwarded.

Speeds

<LinearLoading speed="slow" />
<LinearLoading speed="normal" />
<LinearLoading speed="fast" />

Custom thumb

<LinearLoading
  speed="normal"
  slots={{
    thumb: (thumbClassName) => (
      <div className={`${thumbClassName} flex h-full flex-row gap-1`}>
        <span className="h-full w-2 rounded-full bg-black" />
        <span className="h-full w-6 rounded-full bg-black" />
        <span className="h-full w-12 rounded-full bg-black" />
      </div>
    ),
  }}
/>

slots.thumb receives the base animation class string as its only argument. Spread it onto your outermost element to inherit the animation, then customize the visual appearance freely.

Customization (slotProps)

Accessibility

• Renders with role="progressbar" to announce an ongoing operation to screen readers.
• aria-valuemin, aria-valuemax, and aria-valuenow are not set — this is an indeterminate bar. Add aria-label or aria-labelledby to describe what is loading.