Creating a calculating loader with Fluent Forms

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.

Form setup

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.

Example

[Page Start class="calculating"]
Number field 1
Number field 2

[Page break]
{loader will be added here}
Answer = ..... etc

[Page break]
- Rest of form continues here -

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:

        <div class="loader-overlay">
<div class="inner-loader ff-hidden">

<div class="lds-ripple">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>

Calculating your numbers...</div>
</div>
Copy

The first 2 div’s are for positioning and JavaScript targeting.

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)

Form Styling

We now have some styling to do.

Copy and paste the CSS below into your Custom CSS section of your Fluent Form settings.

        .fluentform-step{
    position: relative;
}
.loader-wrapper{
    position:absolute;
    top:0;
    left:0;
    background: white; //Background colour of your form
    z-index: 99;
}
.loader-overlay{
    background: rgba(0,0,0,0.33);
    border-radius: 8px;
}
.loader-overlay,.loader-wrapper,.inner-loader{
    height:100%;
    width:100%;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
}
.inner-loader{
    color: white;
    font-size: 1.2rem;
}
      
Copy

The css above, adds an absolute positioned div over the entire step, this gives the effect that step is loading.

Loader CSS

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

        /* Replace with your loader CSS below */
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
      
Copy

Making it work

To make the loader work properly, we need to add some JavaScript.

        $(".calculating .ff-btn-next").click(function(){
    $(".loader-wrapper").removeClass("ff-hidden");
    setTimeout(() => {
        $(".inner-loader").removeClass("ff-hidden");
    }, 400);
    setTimeout(() => {
        $(".inner-loader").addClass("ff-hidden");
        $(".loader-wrapper").addClass("ff-hidden");     
    }, 5000);
});
      
Copy

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)