Kinetic UI
Back to Introduction
Data Display

Loader

Visual indicators used to express an unspecified wait time or display the status of an ongoing process.

Quick Actions
CLI Installation
npx kinetic-ui-cli@latest add loader

The Loader component gives users visual feedback during data fetching, form submissions, or while waiting for background operations to complete. It includes multiple design variants and scaling sizes.

Live Preview

Loader

Installation

npx kinetic-ui-cli@latest add loader

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { Loader } from "@/components/ui/loader";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { Loader } from "@/components/ui/loader";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <Loader
      />
    </div>
  );
}
Performance Notes
  • Uses CSS hardware acceleration via GPU transform-binds.
  • Damped interpolation minimizes paint-redraw flashes.
  • Tree-shakable import: only compiles elements requested.
Accessibility Notes
  • Full keyboard focus-ring navigation support (`Tab`/`Shift+Tab`).
  • ARIA roles mapped correctly for assistive screen readers.
  • Respects `prefers-reduced-motion` system toggles.