Home Forums Themes Support Claue Infinite Scroll Loading

Viewing 38 reply threads
  • 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.

    • #31807

      No, don’t replace old code with css code.

      please add css code to claue-child > style.css

      Kind regards

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

    • #31808

      ok once i add code to style.css, how do i call the code forward so that it replaces other ?

    • #31809

      Hi,

      Please give me the link where suggest css code i will check and give you solution.

      Thanks

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

    • #31810

      its above.  here it is again.  Here’s the site with resources: https://loading.io/

      this is css code:

      <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>

    • #31811

      corrected code:

      <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: 200px !important;
      height: 200px !important;
      -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
      transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
      }
      </style>

    • #31814

      Hi,

      Please change code on line 31 to

      <div class="lds-eclipse"><div>
      	<?php echo next_posts_link( esc_html__( 'Load More', 'claue' ) ); ?>
      </div></div>

      and change add css code to claue-child > style.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;
      display: inline-block;
      }
      .lds-eclipse a {
      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;
      background: none;
      border: none;
      text-indent: -999em;
      }
      .lds-eclipse {
      width: 200px !important;
      height: 200px !important;
      -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
      transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
      }
      .jas-ajax-load a:hover{
      	background: none !important;
      	border: none !important;
      	box-shadow: 0 10px 0 0 #e06ed3;
      }

      Kind regards

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

    • #31816

      This is the code from line 30 to 34.

      Its not the same as your code you told me to replace.  do i replace this code ?

    • #31819

      No, just replace code in line 31

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

      with new code

      <div class="lds-eclipse"><div>
      	<?php echo next_posts_link( esc_html__( 'Load More', 'claue' ) ); ?>
      </div></div>

      Regards

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

    • #31823

      didn’t show new spinner.  everything stayed the same ??

    • #31835

      Hi,

      I didn’t see the code apply. it still use old code.

      <div class="lds-eclipse"><div>
      	<?php echo next_posts_link( esc_html__( 'Load More', 'claue' ) ); ?>
      </div></div>

      Kind regards

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

    • #32180

      can you do this with admin account?  when i do it i get nothing.

    • #32193

      Could you please do on staging site and send me staging admin account.

      Thanks

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

    • #32194
      This reply has been marked as private.
    • #32196

      Hi,

      You site don’t give permission to save file. Please download attach file and replace in claue-child > woocommerce > loop.

      Kind regards

      Attachments:
      You must be logged in to view attached files.

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

    • #32200
      This reply has been marked as private.
    • #32205

      Hi,

      The issue because you don’t add css in Theme Option > General Layout > Custom CSS

      I added it work now

      @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;
      	display: inline-block;
      }
      .lds-eclipse a {
      	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;
      	background: none;
      	border: none;
      	text-indent: -999em;
      }
      .lds-eclipse {
      	width: 200px !important;
      	height: 200px !important;
      	-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
      	transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
      }
      .jas-ajax-load a:hover{
      	background: none !important;
      	border: none !important;
      	box-shadow: 0 10px 0 0 #e06ed3;
      }

      Kind regards

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

    • #32209

      ok but its spinning all the time now.  if i reach the end of my list of available products its still spinning but faded.  it should only show spinner when searching.  once i hit the bottom of list it should either be gone or we could put a message “No more items to load”

    • #32211

      Hi,

      It need more customize. Please contact with expert at https://bit.ly/2Loo6ke

      Kind regards

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

    • #32212

      Did you check this on desktop?  Its shaking the template on pages that have spinner.  Can help me stop this shaking?  Otherwise i need to put everything back to original form.  look at video

      https://sexyleggingsusa.com/wp-content/uploads/2019/07/IMG_2138.mov

    • #32213

      Hi,

      I remove file pagination.php in child theme and remove code in Theme Option > General Layout > Custom CSS, it now back to original

      Kind regards

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

    • #32332

      Thanks.  something you guys should consider.  putting in a better spinner.  This one is very easy to miss. i colored it blue but its hard to style this.  if you click it, it turns white.  really complex little spinner here.

    • #34694

      i’m talking about the the line of code that controls the preloader for each page on shop “infinite scroll” pagination

    • #34695

      how do i get this to show?  where is this at?

    • #34697

      Hi,

      You can change background color by add below code to Claue > Theme Option > General Layout > Custom CSS

      .jas-ajax-load a:hover {
      	background-color: #56cfe1 !important;
      }

      and change #56cfe1 with your color.

      Kind regards

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

Viewing 38 reply threads

You must be logged in to reply to this topic.