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

Requires @ninna-ui/core (auto-installed) + CSS setup.

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.

Dots Variant

Bouncing dots animation.

Pulse Variant

Pulsing circle animation.

Ping Variant

Expanding ping animation.

Sizes

Loading indicators in different sizes from xs to 3xl.

2xl

3xl

Use Cases

Real-world loading indicator usage examples.

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