Change spinner animation

Hello @yousuft,

Unfortunately, this feature is not available on OceanWP theme.
However, we would forward it to the developer team to be checked and, if possible, to be added in the next updates.

Best Regards

Thanks Shahin, that’ll be great.

Meanwhile, could I use CSS to change the spinner? …and what would the code be to put in the customizer?

Thanks again.

Hello @yousuft,

It depends on the kind of spinner, you can customize it, but maybe it needs a lot of CSS or JS too.

For now, we don’t have custom CSS for the spinner, but you can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/

keyframes: https://www.w3schools.com/css/css3_animations.asp

Best Regards

Cool, Thanks Shahin. I’ll figure this one out.

Just to be clear, to target the spinner and override the CSS should I be targeting the loader-ellips class or infinite-scroll-request class, or both?

I don’t want to mess with the settings from Customizer so this will be helpful. I’d rather work within OceanWP’s current framework.

If you’d like the code that I produce to change the spinner please let me know. Happy to share it.
The primary use-case I’m aiming at is to replace the ellipses spinner with text that says “Loading More Products” so the user is informed of what operation they are waiting for. For now, I’ll only code a simple animation to flash the text as nothing more is needed but to keep the user in the loop.

Thanks!

Hello @yousuft,

If you wanna use the “loader-ellips” it depends on the spinner, if it is a simple spinner, it’s not necessary, but you can use it. But, please tell me how you would like the section to look like.

Also, you can search for the “Single CSS Spinner”. You will find some ideas with the source codes; it’s a custom CSS you can use, so it doesn’t affect on customizer.

Best Regards