Text charging post

Hi there,

GP uses Metafizzy Infinite Scroll - which has the following options:

https://infinite-scroll.com/options.html

And GP has the generate_blog_infinite_scroll_init filter hook that you can use to filter in other arguments.
Looking at the above metafizzy options there is a status option:

https://infinite-scroll.com/options#status

Which will display the HTML elements with the specified class.

So you should be able to do this:

add_filter( 'generate_blog_infinite_scroll_init', function( $args ) {
    $args['status'] = '.page-load-status';

    return $args;
} );

Then you just need to use a Hook Element to add in the HTML with the messages you want displayed:

<div class="page-load-status">
  <p class="infinite-scroll-request">Loading...</p>
  <p class="infinite-scroll-last">End of content</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>

Muchas gracias David!!!

Lo conseguimos tal y como dijiste!!!! gracias...

https://safegest.com/blog/

Como soy una persona muy perfeccionista me gustaria saber si podria colocar las marcas de movimiento que se muestran en su pagina.

https://www.webpositer.com/blog/

Un saludo...

OK so that example site has this HTML in their status container:

<div class="fusion-loading-spinner">
    <div class="fusion-spinner-1"></div>
    <div class="fusion-spinner-2"></div>
    <div class="fusion-spinner-3"></div>
</div>

And i skimmed over end edited the CSS it uses for the layout and animation:

.fusion-loading-spinner {
    display: inline-block;
}

.fusion-loading-spinner .fusion-spinner-1,
.fusion-loading-spinner .fusion-spinner-2,
.fusion-loading-spinner .fusion-spinner-3 {
    width: 12px;
    height: 12px;
    background-color: #e2e0e0;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: fusion-bounce-delay 1.4s infinite ease-in-out;
    animation: fusion-bounce-delay 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fusion-loading-spinner .fusion-spinner-1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.fusion-loading-spinner .fusion-spinner-2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.fusion-loading-spinner .fusion-loading-msg {
    display: inline-block;
    margin-left: 7px;
}

@-webkit-keyframes fusion-bounce-delay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
    }
}

@keyframes fusion-bounce-delay {

    0%,
    80%,
    100% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }

    40% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

Muchas gracias David, he creado otro Hook para esta funcion.

Y funciona perfectamente, el error es que al llegar al final del contenido continua haciendo el loading... al llegar al final del contenido deberia desaparecer...

https://safegest.com/blog/

¿se podria hacer con css?

Ok if you go back to the status HTML:

<div class="page-load-status">
  <p class="infinite-scroll-request">Loading...</p>
  <p class="infinite-scroll-last">End of content</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>

Then you need to include the 3 dots HTML within the request element ie.:

<p class="infinite-scroll-request">Loading...</p>

You could do something like this:

<div class="page-load-status">
    <div class="infinite-scroll-request">
        <div class="fusion-loading-spinner">
            <div class="fusion-spinner-1"></div>
            <div class="fusion-spinner-2"></div>
            <div class="fusion-spinner-3"></div>
        </div>
        <p class="infinite-scroll-request-text">Loading...</p>
    </div>
    <p class="infinite-scroll-last">End of content</p>
    <p class="infinite-scroll-error">No more pages to load</p>
  </div>

That way the fusion-loading-spinner will only appear when the infinite-scroll-request is.

Perfecto David!!!!

Funciona... muchas gracias!!!!!

Awesome - glad to be of help!