📝 Step-by-Step Guide to Add Page and Content Loading Animations Without a Paid Plan

If you’re building a website without a paid plan (like on basic hosting or static sites), this guide will help you implement smooth page loading and section switching animations using HTML, CSS, and JavaScript.

Step 1: Create the HTML Structure

• Add a loader section to display a loading animation when the page loads.
• Include a content-wrapper div to hold all the visible content.
• Add navigation buttons to switch between content sections dynamically.

Step 2: Design the Loader Animation with CSS

Use CSS with @keyframes to create a rotating spinner. Style the loader to cover the full page using position: fixed and center it with Flexbox.

Step 3: Fade In Main Content After Load

• Initially set the .content-wrapper to opacity: 0.
• After the page loads (using JS), add a .visible class with opacity: 1 and a transition effect for a fade-in animation.

Step 4: Add CSS for Section Transitions

Each section (e.g., Home, About) should be hidden with display: none by default. Add a class like .active to show the current section with display: block and a fadeIn animation.

Step 5: Handle Page Load and Section Switching in JavaScript

1. Use window.addEventListener("load", ...) to trigger when the page is fully loaded.
2. Hide the loader and show the main content wrapper.
3. Use a showSection(id) function to activate the chosen section.

Step 6: Test Your Website

• Open your site in a browser — you should see the loader first.
• The main content fades in after a second or two.
• Clicking buttons switches between sections with a fade effect.

Step 7: Optional – Customize Animations