Loading

Overview

The Loading component provides a consistent way to display loading states throughout your application. It's designed to give users clear feedback when content is being loaded or processed, with multiple animation styles and customizable options.

Usage

import { Loading } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <div>
      <Loading />
      <Loading size="lg" />
      <Loading variant="dots" />
    </div>
  );
}

Examples

Basic Loading

Default loading spinner with standard animation.

1
2
3

<div className="flex items-center gap-4 justify-center">
  <Loading />
</div>

Custom Size and Duration

Loading components with different sizes and animation durations.

1
2
3
4
5
6
7
8

<div className="flex flex-col gap-4 justify-center items-center">
  <div className="flex items-center gap-4 text-[#00FFFF]">
    <Loading
      duration="250ms"
      size={48}
    />
  </div>
</div>

Dots Line Animation

Alternative loading animation using dots in a line pattern.

1
2
3
4
5
6
7
8
9
10
11

<div className="flex flex-col gap-4 justify-center items-center">
  <div className="flex items-center gap-4 text-[#00FFFF]">
    <Loading type="dots" />
  </div>
  <div className="flex items-center gap-4 text-[#00FFFF]">
    <Loading
      duration="400ms"
      type="dots"
    />
  </div>
</div>

Features

• Multiple Variants: Different animation styles (spinner, dots)
• Size Options: Multiple sizes for different contexts
• Customizable Duration: Configurable animation speed
• Accessibility: Built-in accessibility support with proper ARIA attributes
• Responsive Design: Adapts to different screen sizes
• Dark Mode Support: Consistent appearance in light and dark themes
• Customizable Styling: Extensive styling options through className prop

Props

Variants

Spinner

• Circular spinning animation
• Default variant for most use cases
• Smooth, continuous rotation
• Ideal for general loading states

Dots

• Animated dots in a line pattern
• Alternative visual style
• Sequential animation
• Good for text-based loading contexts

Structure

The Loading component is a simple, self-contained component that renders as a single div element with appropriate styling and accessibility attributes.

Styling

The Loading component includes default styling with:

• Consistent sizing across variants
• Smooth CSS animations
• Dark mode support
• Responsive design
• Focus states for accessibility
• Customizable through className prop

Custom Styling

You can customize the appearance using the className prop:

<Loading 
  variant="spinner"
  size="lg"
  className="custom-loading-class"
/>

Accessibility

The Loading component is built with accessibility in mind:

• ARIA Attributes: Proper ARIA labels for screen readers
• Live Regions: Announces loading state changes
• Focus Management: Maintains focus context during loading
• High Contrast: Maintains proper contrast ratios
• Semantic HTML: Uses appropriate HTML elements and roles
• Screen Reader Support: Announces loading status appropriately