Loader

🧭 When to Use a Loader

Use a Loader when:

• A system action is in progress but doesn’t require exact progress feedback

• The wait time is short and doesn’t justify a full step indicator

• You need a compact visual to fill space while data or content loads

Avoid Loaders when:

• Progress is measurable — use a Progress Bar or Progress Circle instead

• You’re blocking the entire screen — use a Loader with an Overlay or a Skeleton screen

🎨 Types

• Circle – A full, smooth looping ring (default and most commonly used)

• Quarter Circle – A minimal motion arc; less visually heavy, good for embedded UI

• Spinner – A traditional two-tone rotating bar; high visibility and expressive

Each type is animated and uses motion tokens for timing and easing.

📏 Sizes

• Small (sm) – Used in compact UI elements like buttons or tables

• Medium (md) – Default size; suitable for cards, modals, and panels

• Large (lg) – Used for main content areas or large blocks during loading

• Extra Large (xl) – For full-screen or empty state loaders (e.g., dashboards, overlays)

Size affects stroke width, container size, and spacing.

🎯 States

• Default – Uses neutral or branded colors depending on context and theme

• Inverse – Optimized for dark backgrounds or overlays (e.g., white loader on black background)

You can toggle these via Figma variants to quickly preview loaders in different layout environments.

♿ Accessibility Considerations

From a design perspective:

• Always pair the loader with supporting text or a label if the action is longer than 2 seconds

• Ensure motion is smooth and does not flash or distract users

• Use inverse states where backgrounds are dark or low contrast

From a code perspective (if implemented):

• Use role="status" and include a visually hidden label like “Loading...”

• Avoid using only visual indicators—assistive technologies should be able to announce activity

• Do not use aria-busy="true" on entire pages unless absolutely necessary

✅ Best Practices

• Use loaders only when the wait is perceptible — if content loads instantly, skip them

• For button-level actions, use the small size inside the button (replace text or align left of label)

• Pair with contextual messaging like “Loading orders…” or “Submitting form…” when possible

• Avoid using multiple loaders on a single screen — it dilutes clarity

• Choose circle or quarter circle for minimal UI impact, spinner when attention is critical