#Loader

A spinner for a short, in-context wait you cannot measure — one thing at a time, placed where the waiting is happening. Reach for Skeleton when a page, list or table is loading a layout you already know, and for Progress when you can measure the wait or it runs past about ten seconds, where a spinner starts to read as frozen; a Button carries its own loading state, so never put one beside a button. It ships no label and no live region of its own, so the announcement has to come from a role="status" element around it.

Source · Storybook

#Usage

import { Loader } from '@wallarm-org/design-system/Loader';

#Examples

#Types

circle beside sonner, the radial fade. Pick one for a surface and stay with it rather than mixing both in a view.

#Sizes

sm to 3xl, 12px to 48px. The small end is for inline waits inside a field or a row; xl and up are for a spinner centred in a panel.

#Colors

The icon colours, with primary-alt and primary-alt-fixed for dark surfaces. With no color set the spinner simply takes the current text colour, which is usually what you want.

#Circle background

background={false} drops the faint track ring behind the circle — worth it on a surface where the ring reads as a border. It applies to circle only.

#Props