- This topic has 7 replies, 2 voices, and was last updated 3 months, 2 weeks ago by
David.
-
AuthorPosts
-
October 22, 2020 at 12:54 am #1499387
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!
MarcelOctober 22, 2020 at 2:27 am #1499471David
StaffCustomer SupportHi 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/October 22, 2020 at 2:46 am #1499491Marcel
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.October 22, 2020 at 3:45 am #1499560David
StaffCustomer SupportI 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/October 22, 2020 at 3:53 am #1499575Marcel
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!October 22, 2020 at 6:10 am #1499732David
StaffCustomer SupportThat 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/November 9, 2020 at 2:31 am #1523499Marcel
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!November 9, 2020 at 3:38 am #1523572David
StaffCustomer SupportGlad to hear that!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.