Infinite Scroll Loading

[bestfitbybrazil]

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?

 

[Harry]

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

[bestfitbybrazil]

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

[Harry]

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

[bestfitbybrazil]

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

[Harry]

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

[bestfitbybrazil]

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

[bestfitbybrazil]

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>

 

[bestfitbybrazil]

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

[Harry]

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

[bestfitbybrazil]

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

[Harry]

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

[bestfitbybrazil]

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

[Harry]

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

[bestfitbybrazil]

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.

[Harry]

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

[bestfitbybrazil]

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

[Harry]

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

[bestfitbybrazil]

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>

[bestfitbybrazil]

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>

[Harry]

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

[bestfitbybrazil]

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 ?

[Harry]

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

[bestfitbybrazil]

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

[Harry]

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

[bestfitbybrazil]

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

[Harry]

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

[bestfitbybrazil]

This reply has been marked as private.

[Harry]

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

[bestfitbybrazil]

This reply has been marked as private.

[Harry]

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

[bestfitbybrazil]

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”

[Harry]

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

[bestfitbybrazil]

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

[Harry]

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

[bestfitbybrazil]

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.

[bestfitbybrazil]

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

[bestfitbybrazil]

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

[Harry]

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

[Author]

Posts