Slide Preloader

A left sliding minimal preloader animation.

Preview

Code

Code

app/(routes)/layout.tsx

1// This is premium content 2// Upgrade to Pro or Agency plan to access the full code 3// 4// Features included: 5// - Complete implementation 6// - Advanced animations 7// - Performance optimizations 8// - TypeScript support 9// - Responsive design 10// 11// Get access now at /pricing 12 13const PremiumComponent = () => { 14 return ( 15 <div> 16 <h1>Premium Content</h1> 17 <p>Upgrade to unlock this component</p> 18 </div> 19 ); 20}; 21 22export default PremiumComponent;

Installation

Initialized a project and installed the necessary dependencies to use this component.

1. Initialize a new Next.js project:

Code
npx create-next-app@latest my-app

2. Install Framer Motion for animations:

Code
npm install framer-motion

Copy & Paste Components

Code

components/common/preloader.tsx

1// This is premium content 2// Upgrade to Pro or Agency plan to access the full code 3// 4// Features included: 5// - Complete implementation 6// - Advanced animations 7// - Performance optimizations 8// - TypeScript support 9// - Responsive design 10// 11// Get access now at /pricing 12 13const PremiumComponent = () => { 14 return ( 15 <div> 16 <h1>Premium Content</h1> 17 <p>Upgrade to unlock this component</p> 18 </div> 19 ); 20}; 21 22export default PremiumComponent;
Code

components/wrapper/preloader-wrapper.tsx

1// This is premium content 2// Upgrade to Pro or Agency plan to access the full code 3// 4// Features included: 5// - Complete implementation 6// - Advanced animations 7// - Performance optimizations 8// - TypeScript support 9// - Responsive design 10// 11// Get access now at /pricing 12 13const PremiumComponent = () => { 14 return ( 15 <div> 16 <h1>Premium Content</h1> 17 <p>Upgrade to unlock this component</p> 18 </div> 19 ); 20}; 21 22export default PremiumComponent;

Add Animations

Code

src/anim/preloader.ts

1// This is premium content 2// Upgrade to Pro or Agency plan to access the full code 3// 4// Features included: 5// - Complete implementation 6// - Advanced animations 7// - Performance optimizations 8// - TypeScript support 9// - Responsive design 10// 11// Get access now at /pricing 12 13const PremiumComponent = () => { 14 return ( 15 <div> 16 <h1>Premium Content</h1> 17 <p>Upgrade to unlock this component</p> 18 </div> 19 ); 20}; 21 22export default PremiumComponent;

Add Hooks

Code

src/hooks/usePreloader.ts

1// This is premium content 2// Upgrade to Pro or Agency plan to access the full code 3// 4// Features included: 5// - Complete implementation 6// - Advanced animations 7// - Performance optimizations 8// - TypeScript support 9// - Responsive design 10// 11// Get access now at /pricing 12 13const PremiumComponent = () => { 14 return ( 15 <div> 16 <h1>Premium Content</h1> 17 <p>Upgrade to unlock this component</p> 18 </div> 19 ); 20}; 21 22export default PremiumComponent;

Become an Astrae
Affiliate Today

Make referrals, and bring in clients. Keep 50% of your earnings paid out weekly.

Description