Loaders are good to show that you are waiting for content to download. It can also be used to suggest there is something being calculated by the server.
Someone in the Fluent Form Facebook group asked if they could add a fake loader to simulate the calculation of something inside their form when they went to the next step.
We first need to add the form step fields. You can add as many as you need. To add the loader. You need to go to the form step section of the one before where you want it to be and add the class
calculating onto the element.
Adding the loader
We now need to add the loader. This should be in the page break section after the one you added your class to. In my case, it’s the 2nd page section.
We are now going to add a HTML field element and add the classes
loader-wrapper ff-hidden to the element container. Then inside the text/html section of the field. We need to add the following:
The middle divs are for your css loader. I am using a css loader from Pure CSS Loader.
Feel free to use whichever loader you want. However, make sure you replace the middle section with your chosen loader HTML markup. (You will also need the CSS later)
We now have some styling to do.
Copy and paste the CSS below into your
Custom CSS section of your Fluent Form settings.
The css above, adds an absolute positioned div over the entire step, this gives the effect that step is loading.
We need to add the CSS for our loader. This can go below the code we just added.
(Make sure you paste your css for your selected loader.)
Making it work
What we are doing, is adding a click handler event on the
next step button that is inside our step with the
.calculating class on it.
We are then removing the
.ff-hidden class so that the we can show the loader.
The second part of the code, uses
setTimeout which allows me to set a delay of 5 seconds until we re-add the
ff-hidden class to hide and “complete” the loading sequence.
You can change the time of the loading sequence by changing the 2nd to last line where it says
5000 to another number. (Note: this is in milliseconds)