Hello . I made a code in which the posts are loaded via a button, but can be easily adapted.
//Loop
<div class="wrp">
<ul>
<?php
$loop = new WP_Query( array( 'post_type' => 'download', 'orderby' => 'id', 'order' => 'DESC', 'posts_per_page' => 5) );
global $post;
?>
<?php
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post();
?>
<li>
<?php echo get_the_title(); ?>
</li>
<?php endwhile;
endif;
wp_reset_postdata();
?>
</ul>
<a href="#" class="loadMore">Load More <i class="fa fa-spinner fa-spin"></i></a>
</div>
//JS
$(document).ready(function() {
var currentPage = 2,
base = 'https://MYDOMAIN.COM/', //URL for your site
query = '?json=get_posts&post_type=download&page='+currentPage; // The query for getting posts
$('.loadMore').click(function(e){
e.preventDefault();
var button = $(this),
unavailable = button.hasClass("unavailable");
if (unavailable === false) {
button.find('i').fadeIn();
$.getJSON( base+query+"&dev=1", function( data ) {
var posts = data.posts,
pages = data.pages,
if (paginas > 1 && currentPage <= pages) {//Check if exist more posts
$.each(posts, function(i, posts){
var title = posts.title.toString();
$(".wrp ul").append('<li>'+title+'</li>');
});
currentPage++;
} else {
button.addClass("unavailable");
}
button.find('i').fadeOut();
});
}
});
});
//SCSS
.loadMore {
color: #ffffff;
padding: 15px;
background-color: red;
transition: all 200ms ease-in-out;
margin: 20px 0;
display: inline-block;
&:hover {
opacity: 0.7;
}
&.unavailable {
cursor: not-allowed;
opacity: 0.3;
}
.fa {
display: none;
}
}
Good luck ??