On this page

Loading

Loading indicator component with multiple animation variants including spin, dots, pulse, and ping.

import { Loading } from "@ninna-ui/feedback";

pnpm add @ninna-ui/feedback@latest

Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use the Loading component in your application.

import { Loading } from "@ninna-ui/feedback";

export default function Example() {
  return (
    <div>
      <Loading variant="spin" color="primary" size="md" />
      <Loading variant="dots" color="success" size="lg" />
      <Loading variant="pulse" color="info" size="xl" />
    </div>
  );
}

Spin Variant

Classic spinning circle loader.

Live preview/ Default

Dots Variant

Bouncing dots animation.

Live preview/ Default

Pulse Variant

Pulsing circle animation.

Live preview/ Default

Ping Variant

Expanding ping animation.

Live preview/ Default

Sizes

Loading indicators in different sizes from xs to 3xl.

Live preview/ Default

2xl

3xl

Use Cases

Real-world loading indicator usage examples.

Live preview/ Default

Button Loading

Card Loading

Loading content...

Inline Loading

Fetching data

Overlay Loading

Background content

Please wait...

API Reference

Complete list of props for the Loading component.

Props

Prop	Type	Default	Description
`variant`	`'spin' \| 'ping' \| 'pulse' \| 'dots'`	`'spin'`	Animation style of the loading indicator
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Color theme of the loading indicator
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'`	`'md'`	Size of the loading indicator
`className`	`string`	`—`	Additional CSS classes
`label`	`string`	`'Loading...'`	Accessible label for screen readers

Accessibility

Uses role="status" to indicate loading state
Includes aria-label for screen reader announcement
Hidden text with sr-only class provides context
Default label is "Loading..." but can be customized via label prop
Animations respect prefers-reduced-motion media query
Color contrast meets WCAG AA standards for all color variants