Open demo

CSS code

HTML 
<div><span class="lbl">Button with remaining count</span><div class="lm">
<a href="#" class="btn">Load 12 more</a><small>Showing 24 of 96 results</small></div></div>

<div><span class="lbl">Progress above the button</span><div class="lm">
<div class="track" role="progressbar" aria-label="Results loaded" aria-valuenow="96" aria-valuemin="0" aria-valuemax="240"><i></i></div>
<a href="#" class="btn outline">Load more</a><small>96 of 240 loaded</small></div></div>

<div><span class="lbl">End of feed</span><div class="lm">
<small>That is everything from the last 30 days.</small>
<a href="#" class="endlink">Browse the archive →</a></div></div>
CSS 
.lm{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center}
.lm .btn{box-sizing:border-box;display:inline-grid;place-items:center;height:44px;padding:0 28px;border-radius:11px;
  background:#0f172a;color:#fff;font-size:.9rem;font-weight:600;text-decoration:none;
  transition:opacity .15s}
.lm .btn:hover{opacity:.86}
.lm .btn.outline{background:#fff;color:#0f172a;border:1px solid #cbd5e1}
.lm .btn:focus-visible,.endlink:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.lm small{font-size:.8rem;color:#64748b}
.track{width:250px;max-width:100%;height:5px;background:#e2e8f0;border-radius:99px;overflow:hidden}
.track i{display:block;height:100%;width:40%;background:#15803d;border-radius:99px}
.endlink{font-size:.88rem;color:#2563eb;text-decoration:none;border-bottom:1px solid #bfdbfe;
  padding-bottom:2px}

@media(prefers-reduced-motion:reduce){.lm .btn{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Button with remaining count</span>
<div class="loadmore d-flex flex-column align-items-center text-center">
<a href="#" class="btn btn-dark btn-loadmore">Load 12 more</a>
<small>Showing 24 of 96 results</small>
</div></div>

<div><span class="lbl">Progress above the button</span>
<div class="loadmore d-flex flex-column align-items-center text-center">
<div class="progress progress-loadmore" role="progressbar" aria-label="Results loaded" aria-valuenow="96" aria-valuemin="0" aria-valuemax="240">
  <div class="progress-bar" style="width:40%"></div>
</div>
<a href="#" class="btn btn-outline-secondary btn-loadmore">Load more</a>
<small>96 of 240 loaded</small>
</div></div>

<div><span class="lbl">End of feed</span>
<div class="loadmore d-flex flex-column align-items-center text-center">
<small>That is everything from the last 30 days.</small>
<a href="#" class="link-loadmore link-underline link-underline-opacity-25 link-underline-opacity-100-hover link-offset-2">Browse the archive →</a>
</div></div>
CSS 
.loadmore{gap:13px}
.loadmore small{font-size:.8rem;color:#64748b}
.btn-loadmore{--bs-btn-padding-x:28px;--bs-btn-padding-y:0;--bs-btn-font-size:.9rem;--bs-btn-font-weight:600;
  --bs-btn-border-radius:11px;display:inline-grid;place-items:center;height:44px;transition:opacity .15s}
.btn-loadmore.btn-dark{--bs-btn-bg:#0f172a;--bs-btn-border-color:#0f172a;--bs-btn-hover-bg:#0f172a;--bs-btn-hover-border-color:#0f172a;
  --bs-btn-active-bg:#0f172a;--bs-btn-active-border-color:#0f172a}
.btn-loadmore.btn-outline-secondary{--bs-btn-bg:#fff;--bs-btn-color:#0f172a;--bs-btn-border-color:#cbd5e1;
  --bs-btn-hover-bg:#fff;--bs-btn-hover-color:#0f172a;--bs-btn-hover-border-color:#cbd5e1;
  --bs-btn-active-bg:#f1f5f9;--bs-btn-active-color:#0f172a;--bs-btn-active-border-color:#cbd5e1}
.btn-loadmore:hover{opacity:.86}
.btn-loadmore:focus-visible,.link-loadmore:focus-visible{outline:2px solid #2563eb;outline-offset:2px;box-shadow:none}
.progress-loadmore{--bs-progress-height:5px;--bs-progress-bg:#e2e8f0;--bs-progress-border-radius:99px;
  --bs-progress-bar-bg:#15803d;width:250px;max-width:100%}
.progress-loadmore .progress-bar{border-radius:99px}
.link-loadmore{--bs-link-color-rgb:37,99,235;--bs-link-hover-color-rgb:29,78,216;font-size:.88rem}
@media(prefers-reduced-motion:reduce){.btn-loadmore{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] uppercase tracking-[.12em] text-slate-500">Button with remaining count</span>
<div class="flex flex-col items-center gap-[13px] text-center">
<a href="#" class="inline-grid h-11 place-items-center rounded-[11px] px-7 text-[.9rem] font-semibold transition-opacity hover:opacity-[.86] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand bg-slate-900 text-white">Load 12 more</a>
<small class="text-[.8rem] text-slate-500">Showing 24 of 96 results</small>
</div></div>

<div><span class="mb-4 block text-[.72rem] uppercase tracking-[.12em] text-slate-500">Progress above the button</span>
<div class="flex flex-col items-center gap-[13px] text-center">
<div class="h-[5px] w-[250px] max-w-full overflow-hidden rounded-full bg-slate-200" role="progressbar" aria-label="Results loaded" aria-valuenow="96" aria-valuemin="0" aria-valuemax="240">
  <span class="block h-full w-[40%] rounded-full bg-[#15803d]"></span>
</div>
<a href="#" class="inline-grid h-11 place-items-center rounded-[11px] px-7 text-[.9rem] font-semibold transition-opacity hover:opacity-[.86] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border border-slate-300 bg-white text-slate-900">Load more</a>
<small class="text-[.8rem] text-slate-500">96 of 240 loaded</small>
</div></div>

<div><span class="mb-4 block text-[.72rem] uppercase tracking-[.12em] text-slate-500">End of feed</span>
<div class="flex flex-col items-center gap-[13px] text-center">
<small class="text-[.8rem] text-slate-500">That is everything from the last 30 days.</small>
<a href="#" class="border-b border-[#bfdbfe] pb-0.5 text-[.88rem] text-brand focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">Browse the archive →</a>
</div></div>
CSS 
@theme {
  --color-brand: #2563eb;
}

About this set

The alternative to numbered pages for feeds, product grids and comment threads, where readers keep scrolling rather than jumping to a page. Button with remaining count is a solid dark Load 12 more button with a Showing 24 of 96 results line underneath, so people know how much is left before they commit. Progress above the button adds a green progress bar over an outlined Load more button with a 96 of 240 loaded caption, useful for long catalogues. End of feed is the quiet state shown when nothing is left: a short sentence and a text link to an archive. The buttons are links, so each can point at the next page URL and still work before or without JavaScript; a script can intercept the click and append results in place. The progress bar is a real progressbar with its value, minimum and maximum. The Bootstrap version uses .btn, .progress and the link underline utilities, restyled through –bs-btn and –bs-progress variables; the Tailwind version uses utility classes only.

What’s included

  • Load more button with a remaining-results caption
  • Progress bar above an outlined button
  • End-of-feed message with an archive link
  • Links that point to the next page and work without JavaScript
  • Bootstrap version uses .btn and .progress

Accessibility

The buttons and archive link are real links with visible text, and each shows a 2px blue focus outline. The progress bar has role="progressbar", an aria-label and aria-valuenow, -valuemin and -valuemax, and its green fill reaches 3:1 against the track. Captions meet 4.5:1 contrast, and the hover fade is switched off under prefers-reduced-motion.

Customise it

In plain CSS change the #0f172a button fill, the 44px height on .lm .btn and the #15803d bar colour on .track i. In Bootstrap set --bs-btn-bg on .btn-loadmore and --bs-progress-bar-bg on .progress-loadmore. In Tailwind swap bg-slate-900, h-11 and bg-[#15803d].