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.
-
Ajax Load More Post Example
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes,...
-
Donec ullam corper nulla metus auctor frinel
Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Vestibulum id ligula porta...
-
Lorem Ipsum Maec diam eget risus varius blandit
Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum...
-
Pellentesque ornare sem lacinia quam venenatis vestibulum
Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis...
Filter
Use the alm_before_button filter to add a #custom-alm-loader div to the Ajax Load More container.
|
1 2 3 4 5 6 7 |
// Add to functions.php function my_custom_alm_before_button() { if(is_page('custom-loader')){ return '<div id="custom-alm-loader"></div>'; } } add_filter( 'alm_before_button', 'my_custom_alm_before_button' ); |
CSS
While posts are loading a class of .alm-loading is added to the Ajax Load More container – we can then use this class to display the custom loading indicator.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#custom-alm-loader{ opacity: 0; display: none; width: 100%; padding: 50px; margin: 0 0 20px; background: #fff; border: 2px dashed #ccc; background: url("img/ajax-loader.gif") no-repeat center center; transition: all 0.1s ease; } .alm-loading #custom-alm-loader{ display: block; opacity: 1; } |
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"]