Awesome Preloader

A professional, visually stunning preloader built with Next.js, React, TypeScript, Framer Motion for animations, and Tailwind CSS for styling with SCSS modules for custom styling.

Live Preview

Visit this link: https://awesome-preloader.vercel.app/

Features

• Visually stunning preloader animation with dynamic elements and multilingual greetings
• Smooth transitions between loading and content states with SVG path animations
• Responsive design that works on all device sizes
• Built with modern technologies: Next.js, React, TypeScript, Framer Motion, and Tailwind CSS with SCSS modules
• Follows Atomic Design Pattern for component organization

Project Structure

├── public/               # Static files
├── src/                  # Source code
│   ├── components/       # React components following Atomic Design
│   │   ├── atoms/        # Basic building blocks
│   │   ├── molecules/    # Animation definitions and combinations of atoms
│   │   └── organisms/    # Complex UI components like Preloader
│   ├── custom-styles/    # SCSS modules for component-specific styling
│   ├── pages/            # Next.js pages
│   └── styles/           # Global styles
├── package.json          # Dependencies and scripts
├── tsconfig.json         # TypeScript configuration
├── tailwind.config.js    # Tailwind CSS configuration
└── postcss.config.js     # PostCSS configuration

Getting Started

Prerequisites

• Node.js (v14 or later)
• npm or yarn

Installation

1. Clone the repository
2. Install dependencies:

npm install
# or
yarn install

Development

Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser to see the result.

Build

Create a production build:

npm run build
# or
yarn build

How It Works

The preloader uses Framer Motion for smooth animations, SVG path morphing, and Tailwind CSS with SCSS modules for styling. The animation displays a sequence of multilingual greetings that transition one after another, followed by a smooth exit animation using SVG path morphing. The preloader automatically transitions to the main content when all greetings have been displayed.

The implementation follows the Atomic Design Pattern:

• Molecules: Animation definitions in Animation.tsx that define opacity and slide-up animations
• Organisms: The main Preloader component that orchestrates the animation sequence
• Custom Styles: SCSS modules for component-specific styling
• Pages: Next.js pages that are wrapped with the Preloader component

Usage

The Preloader is integrated at the application level in _app.tsx, which means it wraps around all pages automatically:

// In _app.tsx
import Preloader from '@/components/organisms/Preloader';

export default function App({ Component, pageProps }: AppProps) {
  // ...
  return (
    <Preloader>
      <Component {...pageProps} />
    </Preloader>
  );
}

This ensures that the preloader animation is shown before any page content is displayed. The preloader will automatically transition to the page content after displaying all multilingual greetings.

Customization

You can customize the preloader by modifying:

• Colors and styling in the SCSS module at src/custom-styles/preloader.module.scss
• Animation parameters in the Animation.tsx file
• Multilingual greetings in the words array in the Preloader component
• Animation timing and duration in the Preloader component
• SVG path morphing parameters for the exit animation