If you want to use the “Load more” button when using repeater, you can do that with .JS library called “Infinite Scroll“.

  • Load Infinite Scroll script from their CDN. For a speed purposes – use conditions to make it load only on pages where you need to use it. Current URL is:
https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js
  • Create Repeater (if you use it at static front-page, you may need this pagination hack for wordpress).
  • For a repeater Query – I am using Custom, Post type = my post type, Count = posts per page 18. Use your own of course.
  • 3. Create “View more” button – I just added a Link wrapper with some text inside and with this class: .view-more-button (you need to specify this class later in inifniteScroll settings).
  • 4. Add a InfiniteScroll settings to Oxygen: Then you can add this code directly to the code block in page, but I am using it as a shortcode from advanced scripts, because I want to use it on more pages. It is up to you. Put it directly into code block or use shortcode way:
document.addEventListener("DOMContentLoaded", function() {
	if(window.angular) return;

	var infScroll = new InfiniteScroll( '.oxy-dynamic-list', {
		path: '.next.page-numbers',
		append: '.oxy-dynamic-list > .ct-div-block',
		hideNav: '.oxy-repeater-pages-wrap',
		button: '.view-more-button',
		scrollThreshold: false, // disable load on scroll 
	});
});

Refresh your page, and it is done. If you want to display status or set different settings, check out the documentation of infinite scroll library.

Add loading animation

Add this HTML to the code block before Show more button:

<div class="loading-status">
<div class="loader-wheel infinite-scroll-request">
  <i><i><i><i><i><i><i><i><i><i><i><i>
  </i></i></i></i></i></i></i></i></i></i></i></i>
</div>
  <p class="infinite-scroll-last c-text-s c-text-light">End of content</p>
  <p class="infinite-scroll-error c-text-s c-text-light">No more pages to load</p>
</div>
  • .infinite-scroll-request element will be displayed on request
  • .infinite-scroll-last element will be displayed on last
  • .infinite-scroll-error element will be displayed on error

Add also this CSS styles of the loader:

.loading-status {
	display: none; 
	text-align: center;

}

.loader-wheel {
  font-size: 64px;
  position: relative;
  height: 1em;
  width: 0.55em;
  padding-left: 0.45em;
  animation: loader-wheel-rotate 0.5s steps(12) infinite;
  overflow: hidden;
}

.loader-wheel i {
  display: block;
  position: absolute;
  height: 0.3em;
  width: 0.1em;
  border-radius: 0.05em;
  background: #333;
  opacity: 0.8;
  transform: rotate(-30deg);
  transform-origin: center 0.5em;
}

@keyframes loader-wheel-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Add this to the JS setup of your infinite scroll var infScroll:

status: '.loading-status'