ComponentsLoading Screen

Loading Screen

A highly customizable loading transition with progress bar, split/rotate/close animation, and a final expand screen overlay.

Installation

$ npx @nehal712521/inprogress add loading-screen

Preview

Usage

import LoadingScreen from "@/components/ui/LoadingScreen";
import { useState } from "react";

export default function Page() {
  const [open, setOpen] = useState(true);

  return (
    <>
      {open && (
        <LoadingScreen
          isOpen={open}
          onFinish={() => setOpen(false)}
          backdropColor="rgba(0,0,0,0.85)"
          fillColor="#22c55e"
          expandColor="#111827"
        />
      )}
    </>
  );
}