Custom Loader

Display a custom loader with each Ajax Load More query

In this example:

Ajax Load More will display a custom loading indicator as posts are being loaded from the server.

Using the alm_before_button filter hook and some custom CSS, a loader will be displayed above the ‘Load More’ button.

Filter

Use the alm_before_button filter to add a #custom-alm-loader div to the Ajax Load More container.

// functions.php
add_filter( 'alm_before_button', function() {
   if( is_page( 'custom-loader' ) ){ 
      return '<div id="custom-alm-loader"></div>'; 
   } 
} );
PHP

The following shortcode was used to create the Custom Loader example.

[ajax_load_more repeater="template_46" post_type="post, ajax_more" images_loaded="true" preloaded="true" preloaded_amount="4" posts_per_page="4" pause="true" pause_override="true"]

The following Repeater Template was used to create the Custom Loader example.