Loading spinner on button click

[Marcel]

I use a button (the button is called “CONFIGURATOR” on the link I provided) that sends the visitor to a page that loads slowly, due to the content (many images present as layers). I want to use a loading spinner on the click of this button, giving users immediate feedback upon submit rather than leaving them wondering while the browser does its thing.
Can you help me with a solution for this case? (I’m using a ghost button right now).
Thank you!
Marcel

[David]

Hi there,

this article explains:

https://www.wpbeginner.com/plugins/how-to-add-a-preloader-animation-to-wordpress/

Option 2 may be the better option.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marcel]

Thank you, David

I know how to add a preloader to a page, but I asked if you could give me a bit of advice on how to add a loading spinner to start when the visitor clicks on the button.
Maybe this video explains better what I want.

[David]

I am not sure where to begin with that.
Generally Button Spinners are related to an Ajax or submit action where the button does not navigate away from the current page.
To do this would mean interrupting the links default action, load the spinner animation, whilst in the background it would ‘buffer’ the new page, and only navigate to the link when the page is loaded.

Unless the page itself is Ajax loaded thats going to be tricky.

I may be missing something simple but i believe it would require custom development.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marcel]

David,
I thought it was much simpler, just add a spinner from CSS only after clicking the button, nothing else. I wanted something like that and not to interrupt the link default action (without using AJAX).
Just a kind of CSS trick. I found something HERE, but not sure how to insert in my ghost button.
But anyway, thank you!

[David]

That code would work fine on a submit button ( or for any on page action ).
But you would never see it in your case as the button would link you to the new page.
I don’t think i have seen this done before.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marcel]

Maybe I was not able to explain exactly what I need. However, I found myself a solution, here is the result. I will need to customize the appearance of the button, but the first step was done.
Have a great day!

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts