Load More Button with Animated Loader Using HTML, CSS, and JavaScript

Loading animations and interactive buttons are essential in modern web design, as they enhance user experience and provide feedback during content loading. This article dives deep into creating a dynamic Load More Button with multiple states of animations and interactive functionality using HTML, CSS, and JavaScript.

1. Introduction

The "Load More" button is commonly used in applications to dynamically load additional content without reloading the entire page. Adding visually appealing loaders and animations not only improves aesthetics but also keeps users engaged while content is being fetched. This tutorial will guide you through the creation of a fully functional and visually appealing Load More Button.

2. Code Overview

Here, we will build an interactive loader system with three key stages:

Spinner Loader: Displays during the initial load.
Normal Loader: Appears when waiting for content to load.
Load More Button: Allows users to load additional content interactively.

Below is the complete HTML, CSS, and JavaScript code:

HTML Structure

Html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Load More Button with Animated Loader</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Jersey+15&family=Sacramento&family=Syne:wght@400..800&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <!-- Loading spinner -->
      <div id="spinner" class="loader"></div>
      <!-- Normal loader -->
      <div id="normal-loader" class="normal-loader">
        <i class="fas fa-spinner fa-spin"></i> Loading
      </div>
      <!-- Load More button -->
      <button id="loadMoreButton" class="load-more">Load More</button>
    </div>
  </body>
</html>

Css

body {
   background-color: #352c2c;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   margin: 0;
   font-family: 'Syne', sans-serif;
}

.container {
   text-align: center;
}

.loader {
   display: inline-block;
   border: 8px solid #fff;
   border-top: 8px solid #111;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   animation: spin 1.5s linear infinite;
   margin: 20px auto;
}

.normal-loader {
   display: none;
   font-size: 32px;
   color: #f1f1f1;
   margin-top: 20px;
}

.load-more {
   display: none;
   padding: 10px 20px;
   font-size: 18px;
   font-weight: bold;
   color: #fff;
   background-color: #4caf50;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.load-more:hover {
   background-color: #388e3c;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

Javascript

// Simulate initial loading
setTimeout(function () {
   document.getElementById("spinner").style.display = "none";
   document.getElementById("normal-loader").style.display = "block";
}, 2000);

// Show Load More button after normal loader
setTimeout(function () {
   document.getElementById("normal-loader").style.display = "none";
   document.getElementById("loadMoreButton").style.display = "block";
}, 4000);

// Load More functionality
document.getElementById("loadMoreButton").addEventListener("click", function () {
   const button = this;
   button.textContent = "Loading...";
   button.disabled = true;

   // Simulate content loading
   setTimeout(function () {
      // Update the button text and re-enable it
      button.textContent = "Load More";
      button.disabled = false;

      // Create a new message element
      const message = document.createElement("div");
      message.textContent = "New content loaded! 🎉";
      message.style.marginTop = "20px";
      message.style.color = "#4caf50";
      message.style.fontSize = "18px";
      message.style.fontWeight = "bold";

      // Append the message to the container at the end
      document.querySelector(".container").appendChild(message);
   }, 2000);
});

Output:

3. Explanation

HTML

The spinner and normal-loader are placeholders for the loading animations.
The loadMoreButton is initially hidden and appears after the loading animations complete.

CSS

Body Styling: Center-aligns content vertically and horizontally with a dark background for contrast.
Loader Animations: A spinning effect is applied to the loader using the @keyframes spin animation.
Load More Button: A subtle hover effect makes the button more interactive.

JavaScript

Simulated Loading: The setTimeout functions simulate loading delays for the spinner and normal loader.
Button Click Event: The addEventListener method handles the click event on the button, simulating content loading.

4. Use Cases

Infinite Scrolling: Load more content dynamically without reloading the page.
APIs and Data Fetching: Replace simulated delays with real-time API calls to load additional data.
Interactive Loading Indicators: Provide better feedback to users during content fetch or processing.

5. Customization Tips

Color Scheme: Adjust colors to align with your website’s branding.
Fonts: Use custom fonts to match the theme of your site.
Animations: Experiment with different CSS animations for loaders and buttons.
Content Loading: Replace the alert in the button’s click handler with dynamic content updates (e.g., document.createElement to append new elements).

6. Conclusion

Creating an interactive Load More Button with multiple loading states provides a seamless and engaging user experience. By combining HTML, CSS, and JavaScript, you can simulate loading animations and enhance your website’s interactivity. Customizing this setup further can make it a versatile feature for any web application.

Use this tutorial as a starting point to integrate dynamic loading elements into your projects and give your users a polished, professional experience.