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
Installation
npx kinetic-ui-cli@latest add loaderUsage 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>
);
}