[Support request] Text charging post

[carlos]

Buenas tardes,

He cambiado las entradas del blog para que se carguen con la opcion scroll infinito de generatepress.
Me gustaria que mientras se cargan las entradas aparezca el texto “charging post”.

Como en el blog que adjunto en la imagen.

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

Este seria mi blog

¿Es posible añadir el texto “charging post” mientras se cargan las entradas?

Un saludo

https://safegest.com/blog/

[David]

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>

[carlos]

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…

[David]

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);
    }
}

[carlos]

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?

[David]

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.

[carlos]

Perfecto David!!!!

Funciona… muchas gracias!!!!!

[David]

Awesome – glad to be of help!

[Author]

Posts