Load More

A load more button component with multiple variants, loading spinner, progress bar, status text, and end state. Ideal for paginated content where users manually trigger loading additional items.

Basic

Preview

<div class="load-more">
  <button class="load-more-btn">Load More</button>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center gap-2 py-6">
  <button class="inline-flex items-center justify-center gap-2 font-medium cursor-pointer select-none h-11 px-8 text-primary bg-transparent border border-primary rounded-full hover:bg-primary/10 active:scale-[0.98]">Load More</button>
</div>

Requires: tw.min.css

// Basic load more click handler:
const container = document.querySelector('.load-more');
const btn = container.querySelector('.load-more-btn');

btn.addEventListener('click', async () => {
  container.classList.add('load-more-loading');
  await fetchMoreItems();
  container.classList.remove('load-more-loading');
});

Variants

Preview

<!-- Filled -->
<div class="load-more load-more-filled">
  <button class="load-more-btn">Load More</button>
</div>

<!-- Ghost -->
<div class="load-more load-more-ghost">
  <button class="load-more-btn">Load More</button>
</div>

<!-- Soft -->
<div class="load-more load-more-soft">
  <button class="load-more-btn">Load More</button>
</div>

Requires: ux.min.css

<!-- Filled -->
<div class="flex flex-col items-center gap-2 py-6">
  <button class="inline-flex items-center justify-center gap-2 font-medium cursor-pointer select-none h-11 px-8 bg-primary text-primary-content border border-primary rounded-full hover:brightness-90 active:scale-[0.98]">Load More</button>
</div>

<!-- Ghost -->
<div class="flex flex-col items-center gap-2 py-6">
  <button class="inline-flex items-center justify-center gap-2 font-medium cursor-pointer select-none h-11 px-8 bg-transparent text-primary border-none rounded-full hover:bg-primary/10 active:scale-[0.98]">Load More</button>
</div>

<!-- Soft -->
<div class="flex flex-col items-center gap-2 py-6">
  <button class="inline-flex items-center justify-center gap-2 font-medium cursor-pointer select-none h-11 px-8 bg-primary/10 text-primary border-none rounded-full hover:bg-primary/20 active:scale-[0.98]">Load More</button>
</div>

Requires: tw.min.css

// No JavaScript required — variants are purely visual.
// Add the variant class to the .load-more container.

Loading State

Preview

<div class="load-more load-more-loading">
  <button class="load-more-btn">
    <span class="load-more-spinner"></span>
    Loading...
  </button>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center gap-2 py-6">
  <button class="inline-flex items-center justify-center gap-2 font-medium select-none h-11 px-8 text-primary bg-transparent border border-primary rounded-full pointer-events-none">
    <span class="w-4.5 h-4.5 border-2 border-current border-t-transparent rounded-full animate-spin"></span>
    Loading...
  </button>
</div>

Requires: tw.min.css

// Toggle loading state:
const container = document.querySelector('.load-more');
container.classList.add('load-more-loading');
// ... after data loads:
container.classList.remove('load-more-loading');

With Status Text

Preview

Showing 10 of 48 items

<div class="load-more">
  <button class="load-more-btn">Load More</button>
  <span class="load-more-status">Showing 10 of 48 items</span>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center gap-2 py-6">
  <button class="inline-flex items-center justify-center gap-2 font-medium cursor-pointer select-none h-11 px-8 text-primary bg-transparent border border-primary rounded-full hover:bg-primary/10 active:scale-[0.98]">Load More</button>
  <span class="text-sm text-base-content/40">Showing 10 of 48 items</span>
</div>

Requires: tw.min.css

// Update status text after loading:
const status = document.querySelector('.load-more-status');
status.textContent = `Showing ${loaded} of ${total} items`;

With Progress Bar

Preview

20 of 50

<div class="load-more">
  <button class="load-more-btn">Load More</button>
  <div class="load-more-progress">
    <div class="load-more-progress-bar">
      <div class="load-more-progress-fill" style="width: 40%;"></div>
    </div>
    <span>20 of 50</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center gap-2 py-6">
  <button class="inline-flex items-center justify-center gap-2 font-medium cursor-pointer select-none h-11 px-8 text-primary bg-transparent border border-primary rounded-full hover:bg-primary/10 active:scale-[0.98]">Load More</button>
  <div class="flex items-center gap-2 text-sm text-base-content/60">
    <div class="w-25 h-1 bg-base-300 rounded-sm overflow-hidden">
      <div class="h-full bg-primary rounded-sm" style="width: 40%;"></div>
    </div>
    <span>20 of 50</span>
  </div>
</div>

Requires: tw.min.css

// Update progress after each load:
const fill = document.querySelector('.load-more-progress-fill');
const label = document.querySelector('.load-more-progress span');
const pct = (loaded / total) * 100;
fill.style.width = pct + '%';
label.textContent = `${loaded} of ${total}`;

Sizes

Preview

<!-- Small -->
<div class="load-more load-more-sm">
  <button class="load-more-btn">Load More</button>
</div>

<!-- Default -->
<div class="load-more">
  <button class="load-more-btn">Load More</button>
</div>

<!-- Large -->
<div class="load-more load-more-lg">
  <button class="load-more-btn">Load More</button>
</div>

Requires: ux.min.css

<!-- Small -->
<div class="flex flex-col items-center gap-2 py-6">
  <button class="inline-flex items-center justify-center gap-2 font-medium cursor-pointer select-none h-9 px-6 text-sm text-primary bg-transparent border border-primary rounded-full hover:bg-primary/10 active:scale-[0.98]">Load More</button>
</div>

<!-- Default -->
<div class="flex flex-col items-center gap-2 py-6">
  <button class="inline-flex items-center justify-center gap-2 font-medium cursor-pointer select-none h-11 px-8 text-primary bg-transparent border border-primary rounded-full hover:bg-primary/10 active:scale-[0.98]">Load More</button>
</div>

<!-- Large -->
<div class="flex flex-col items-center gap-2 py-6">
  <button class="inline-flex items-center justify-center gap-2 font-medium cursor-pointer select-none h-13 px-10 text-lg text-primary bg-transparent border border-primary rounded-full hover:bg-primary/10 active:scale-[0.98]">Load More</button>
</div>

Requires: tw.min.css

// No JavaScript required — sizes are purely visual.
// Add load-more-sm or load-more-lg to the .load-more container.

Full Width

Preview

Showing 12 of 36 items

<div class="load-more load-more-full">
  <button class="load-more-btn">Load More</button>
  <span class="load-more-status">Showing 12 of 36 items</span>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center gap-2 py-6 w-full">
  <button class="inline-flex items-center justify-center gap-2 font-medium cursor-pointer select-none h-11 px-8 w-full text-primary bg-transparent border border-primary rounded-full hover:bg-primary/10 active:scale-[0.98]">Load More</button>
  <span class="text-sm text-base-content/40">Showing 12 of 36 items</span>
</div>

Requires: tw.min.css

// No JavaScript required — full width is purely visual.
// Add load-more-full to the .load-more container.

Divider Style

Preview

<div class="load-more load-more-divider">
  <button class="load-more-btn">Load More</button>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center gap-2 py-6 w-full">
  <button class="relative inline-flex items-center justify-center gap-2 font-medium cursor-pointer select-none h-11 w-full bg-transparent text-primary border-none rounded-none before:content-[''] before:absolute before:top-1/2 before:left-0 before:w-[calc(50%-80px)] before:h-px before:bg-base-300 after:content-[''] after:absolute after:top-1/2 after:right-0 after:w-[calc(50%-80px)] after:h-px after:bg-base-300">Load More</button>
</div>

Requires: tw.min.css

// No JavaScript required — divider style is purely visual.
// Add load-more-divider to the .load-more container.

End State

Preview

All items loaded

<div class="load-more load-more-end">
  <button class="load-more-btn">Load More</button>
  <div class="load-more-end-message">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
    All items loaded
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center gap-2 py-6 pointer-events-none">
  <div class="flex items-center gap-2 text-sm text-base-content/40">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
    All items loaded
  </div>
</div>

Requires: tw.min.css

// Switch to end state when all items are loaded:
const container = document.querySelector('.load-more');
container.classList.add('load-more-end');

Glass Variant

Preview

Showing 5 of 20 items

<div class="load-more glass">
  <button class="load-more-btn">Load More</button>
  <span class="load-more-status">Showing 5 of 20 items</span>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center gap-2 py-6">
  <button class="inline-flex items-center justify-center gap-2 font-medium cursor-pointer select-none h-11 px-8 text-base-content backdrop-blur-md bg-white/15 border border-white/18 rounded-full hover:bg-white/25 active:scale-[0.98]">Load More</button>
  <span class="text-sm text-base-content/40">Showing 5 of 20 items</span>
</div>

Requires: tw.min.css

// No JavaScript required — glass variant is purely visual.
// Add the glass class to the .load-more container.

Classes Reference

Class	Description
`load-more`	Container. Flex column layout, centered, with vertical padding.
`load-more-btn`	The button element. Pill-shaped outline button styled with primary color.
`load-more-filled`	Variant. Solid primary background with contrasting text.
`load-more-ghost`	Variant. No border or background, just text with hover highlight.
`load-more-soft`	Variant. Subtle primary background tint with no border.
`load-more-loading`	State. Disables pointer events on the button during loading.
`load-more-spinner`	Animated spinning circle indicator placed inside the button.
`load-more-status`	Muted text below the button showing item count or status info.
`load-more-progress`	Container for the progress bar and label, displayed below the button.
`load-more-progress-bar`	The progress bar track (100px wide, rounded).
`load-more-progress-fill`	The filled portion of the progress bar. Set width via inline style.
`load-more-sm`	Size. Smaller button (height 2.25rem, smaller padding and font).
`load-more-lg`	Size. Larger button (height 3.25rem, larger padding and font).
`load-more-full`	Makes the container and button span full width.
`load-more-divider`	Displays the button as a text divider with horizontal lines on each side.
`load-more-end`	End state. Hides the button and disables pointer events.
`load-more-end-message`	Muted text with icon shown when all items have been loaded.
`glass`	Glass variant. Applies frosted glass effect to the button (add to `.load-more`).