Loader

A spinning circular loading indicator. Renders a single <span>.

When to use

Use Loader for an indeterminate busy state where you only need a standalone spinner (page/section loading, inline "please wait"). For the busy state of a button, use Button's isLoading prop instead of placing a Loader inside it.

There is no @uxf/form twin.

Usage

import { Loader } from "@uxf/ui/loader";

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

Props

LoaderProps extends HTMLAttributes<HTMLDivElement>, but only className and the forwarded ref are applied to the rendered element — other HTML attributes from the type are not currently forwarded.

Variants & states

The spinner color follows the current text color (currentColor); it turns white in dark mode.

Requirements

Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/loader.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.