component · pagination

TuxLoadMore

Explicit "Load more" button. The middle ground between numbered pagination and infinite scroll — the user decides when to expand the list, SEO indexes the next page on click, and there's a clear stop point in long feeds. When all items load, the button switches to a terminal divider ("All loaded · 96 results").

flagship · interactive

Live demo

Click Load more to advance 24 items. The component switches to a loading spinner during the fetch, then to a terminal divider when loaded >= total.

24 items loaded so far…

24 of 96 results · 72 remaining 

<tux-load-more
  :loaded="items.length"
  :total="412"
  :loading="fetching"
  noun="result"
  @load="fetchNext"
/>

terminal state

All loaded

When the host has fetched everything, the button is replaced with a horizontal-rule divider so the list has a visual end instead of just stopping.

All loaded · 96results
<tux-load-more
  :loaded="items.length"
  :total="412"
  :loading="fetching"
  noun="result"
  @load="fetchNext"
/>