Loader

The Loader component is used to indicate that a page or component is loading.

export const Example = () => {
  return <Loader />;
};

Installation

If you haven't included Piksel UI in your project, include it first. You can check the installation page.

Source code

Copy the following source code and add it to your project.

import { cn } from "@/utils/cn";
import { LoaderCircle } from "lucide-react";
import { ComponentProps, forwardRef } from "react";

export type LoaderProps = ComponentProps<typeof LoaderCircle>;

export const Loader = forwardRef<SVGSVGElement, LoaderProps>((props, ref) => {
  const { className, size = "1em", ...rest } = props;
  return (
    <LoaderCircle
      size={size}
      className={cn("animate-spin shrink-0", className)}
      {...rest}
      ref={ref}
    />
  );
});
Loader.displayName = "Loader";