PageLoaderBasic

A full-screen page loading animation with a rotating circular progress indicator and placeholder logo. Features a smooth slide-out transition when loading completes.

✨ Features

• Full Viewport Overlay: Covers entire screen during loading
• Animated Progress Ring: Circular stroke that fills up over time
• Customizable Duration: Set how long the loading animation runs
• Slide-Out Transitions: Choose from 4 directions (top, bottom, left, right)
• Dark Mode Support: Automatically adapts to light/dark themes
• Body Scroll Lock: Prevents scrolling while loading for better UX
• Placeholder Logo: Built-in logo placeholder you can replace

📋 Prerequisites

This component requires:

• Next.js (with App Router)
• Tailwind CSS 4

🚀 Installation

npm install motion

📁 Files Included

The component bundle includes:

• index.tsx - Main component with placeholder logo
• README.md - This documentation

🎯 Basic Usage

1import { PageLoaderBasic } from './components/page-loader-basic';
2
3export default function App() {
4    return (
5        <div>
6            <PageLoaderBasic />
7
8            {/* Your app content */}
9            <main>
10                <h1>Welcome to my app!</h1>
11            </main>
12        </div>
13    );
14}

The loader will display for 2 seconds by default, then slide down and disappear.

🔧 Props

📖 Examples

Quick Loading (1 second)

1<PageLoaderBasic duration={1000} />

Slide Up Exit

1<PageLoaderBasic duration={3000} slideDirection="top" />

Slide Left Exit

1<PageLoaderBasic duration={2500} slideDirection="left" />

Long Loading with Right Exit

1<PageLoaderBasic duration={4000} slideDirection="right" />

🎭 Animation Sequence

1. Initial State: Full screen overlay appears immediately
2. Progress Ring: Circular stroke animates from 0 to 100% over the duration
3. Logo Animation: Placeholder logo fades in and scales up
4. Completion: After duration ends, entire loader slides out
5. Cleanup: Component unmounts and restores body scroll

🔄 Customizing the Logo

Replace the PlaceholderLogo component with your own:

1// Create your custom logo component
2const MyLogo = ({ className }: { className?: string }) => (
3    <img src="/my-logo.svg" alt="My Company" className={className} />
4);
5
6// Then modify the PageLoaderBasic component to use your logo
7// (You'll need to edit the component file directly)

🎨 Slide Directions

💡 Usage Tips

Add to Any Page

Simply add the component to any page and it will show a loader when that page loads:

1import { PageLoaderBasic } from './components/page-loader-basic';
2
3export default function HomePage() {
4    return (
5        <div>
6            <PageLoaderBasic duration={3000} />
7
8            <h1>Welcome to my homepage!</h1>
9            <p>This content will be visible after the loader finishes.</p>
10        </div>
11    );
12}

Different Pages, Different Styles

1// Landing page with quick loader
2export default function LandingPage() {
3    return (
4        <div>
5            <PageLoaderBasic duration={1500} slideDirection="top" />
6            <main>Your landing page content</main>
7        </div>
8    );
9}
10
11// Portfolio page with slower reveal
12export default function PortfolioPage() {
13    return (
14        <div>
15            <PageLoaderBasic duration={4000} slideDirection="left" />
16            <main>Your portfolio content</main>
17        </div>
18    );
19}

🔧 Behavior Notes

• Scroll Lock: Body scrolling is disabled while loader is visible
• Z-Index: Uses z-[999] to appear above other content
• Pointer Events: Disabled to prevent interaction during loading
• Auto Cleanup: Automatically removes itself and restores scroll after completion