Loader

A simple spinning indicator used to communicate that content is loading. Renders as a rotating border circle with configurable size and color.

Import

import { Loader } from '@wavebooking/aqua-fusion';

Preview

Loading preview...

Usage

<Loader />

Sizes

<Loader size="sm" />
<Loader size="default" />
<Loader size="lg" />

Color variants

<Loader variant="default" />
<Loader variant="white" />
<Loader variant="gray" />

Inside a button

<Button disabled>
  <Loader size="sm" variant="white" />
  Loading...
</Button>

Props

PropTypeDefaultDescription
size'sm' | 'default' | 'lg''default'Size of the spinner. sm is 16px, default is 24px, lg is 48px.
variant'default' | 'white' | 'gray''default'Color variant. "default" uses the primary brand color, "white" for dark backgrounds, "gray" for subtle contexts.
classNamestring-Additional CSS classes.