LoadOnScroll — Infinite Scroll / Load-More Demo

A minimal vanilla-JS demo of the "load more" pagination pattern, styled after a news feed. Loads 10 cards at a time with a simulated async delay and a spinner — no frameworks, no dependencies.

Preview

Clone and open index.html to see it in action.

Tech Stack

Vanilla HTML · CSS · JavaScript (zero dependencies)

How It Works

// On button click: show spinner, wait 1 s, render next batch, hide spinner
loadBtn.addEventListener('click', () => {
  loader.style.display = 'block';
  loadBtn.style.display = 'none';
  setTimeout(() => {
    fetchNews(newsCount, 10);   // append 10 cards to DOM
    newsCount += 10;
    loader.style.display = 'none';
    loadBtn.style.display = 'block';
  }, 1000);
});

// Each card: random image from picsum + title + snippet
function fetchNews(start, count) {
  for (let i = start; i < start + count; i++) {
    area.innerHTML += `
      <div class="news-card">
        <img src="https://picsum.photos/seed/${i}/200/120">
        <h3>News #${i + 1}</h3>
        <p>Short description…</p>
      </div>`;
  }
}

Features

• Zero dependencies — pure HTML/CSS/JS
• 1-second simulated async delay with loading spinner
• Batch size and total cards configurable via constants
• Responsive card grid layout

Setup

git clone https://github.com/omaralrayyan7/LoadOnScroll.git
cd LoadOnScroll
# Open directly — no build step
open index.html
# or serve locally
npx serve .

License

MIT