Home Forums Themes Support Claue Infinite Scroll Loading

This topic contains 24 replies, has 2 voices, and was last updated by  Harry 5 days, 8 hours ago.

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #31557

    Thanks for help with changing color of this.  But it still hard to see the spinning wheel which makes it hard for customer to know something is loading.  i would like to try other spinning loaders like these https://icons8.com/preloaders/.

    Where would i replace the loader to test them out?  is the current one a gif?

     

    #31562

    Hi,

    Please copy file pagination.php in claue > core > libraries > vendors > woocommerce > templates > loop

    to claue-child > woocommerce > loop

    and replace code on line 33 with your code

    <?php echo next_posts_link( esc_html__( 'Load More', 'claue' ) ); ?>

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #31600

    the pagination.php file has no code on line 31.  but the code you gave me is already here on line 33.  ??

    #31608

    Yes, you’re right.

    The code in line 33.

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #31611

    yes ok, so its already there.  i didn’t put it there.  so what happens now?? how do change the spinner??

    #31618

    Hi,

    Please replace the code and change with the code generate spinner.

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #31778

    ok so just put spinner code in place of it? i will try that thx.

    #31789

    the spinner is in CSS.  Will that work in this file you speak of?  The css code is quite long

    <style type=”text/css”>@keyframes lds-eclipse {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    }
    @-webkit-keyframes lds-eclipse {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    }
    .lds-eclipse {
    position: relative;
    }
    .lds-eclipse div {
    position: absolute;
    -webkit-animation: lds-eclipse 0.5s linear infinite;
    animation: lds-eclipse 0.5s linear infinite;
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    box-shadow: 0 10px 0 0 #e06ed3;
    -webkit-transform-origin: 80px 85px;
    transform-origin: 80px 85px;
    }
    .lds-eclipse {
    width: 105px !important;
    height: 105px !important;
    -webkit-transform: translate(-52.5px, -52.5px) scale(0.525) translate(52.5px, 52.5px);
    transform: translate(-52.5px, -52.5px) scale(0.525) translate(52.5px, 52.5px);
    }
    </style>

     

    #31790

    It can be saved as GIF, SVG,  CSS or PNG.  how would i incorporate this into the code you have here?

    #31794

    Hi,

    Please copy the code without

    to claue-child > style.css

    If you can save as Gif just insert code to line

    <img src="path_to_image/name_image.gif">

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #31795

    so i have the https address of the gif.  do i just replace the line below with that?

    <?php echo next_posts_link( esc_html__( ‘Load More’, ‘claue’ ) ); ?>

    https://bestfitbybrazil.com/wp-content/uploads/2019/06/Eclipse-0.5s-200px.gif

    #31796

    Please replace

    <?php echo next_posts_link( esc_html__( ‘Load More’, ‘claue’ ) ); ?>

    with

    <img src="https://bestfitbybrazil.com/wp-content/uploads/2019/06/Eclipse-0.5s-200px.gif">

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #31797

    ok it shows up but won’t “load more” products.  just spinning.  how do i get the next group of products to load.  Infinite scroll is already set.  but it won’t load with the gif.  ?

    #31800

    Hi,

    I’m sorry i tried the code like your but it doesn’t work. Now just only can add css to override.

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #31804

    So CSS replaces only this one line of code? It seems to be part of an If Statement.

    When I replaced code last time and then pasted the old code back in, the template broke. The template Header dropped from top of page margin about 1-inch and footer elements disappeared. Really weird.  Luckily I made a copy of file and then it worked again.

Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.