Unkey
Components

Loading

A versatile loading component with multiple animation styles and customizable appearance for indicating loading states.

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.

Custom Size and Duration

Loading components with different sizes and animation durations.

Dots Line Animation

Alternative loading animation using dots in a line pattern.

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

PropTypeDefaultDescription
variant"spinner" | "dots""spinner"The animation style of the loading component
size"sm" | "md" | "lg""md"The size of the loading component
durationnumber1000Animation duration in milliseconds
classNamestringundefinedAdditional CSS classes to apply

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

On this page