Skip to content

How to show a spinner or loading screen in Formyoula

In this guide, we will explain how to show a loading icon or spinner on the screen in Formyoula form. If you have any questions, please email us

The loading screen is useful when any process is executing in background. I.e., Form pre-fill, Query, API call, PDF generation or any custom calculations.

Formyoula app by default shows a spinner while pre-filling or loading data on the page. Here we will talk about how we can show and customize the loading screen on different user actions.

Loading Screen Event

formyoula.event_trigger("main:spinner_dialog", {show:true})

Show Default Loader

Pass {show : true} in event option to hide a loading screen.



From Slitecom

Hide Loader

Pass { show : false } in event option to hide a loading screen.



Set Custom Title and Message

Loading screen also support customization of text and title of screen.


formyoula.event_trigger("main:spinner_dialog",{show:true, title: "Redirecting", message: "Please wait while you are redirected"});

From Slitecom

Adding a Spinner on Specific Section


Adding a spinner on repeat group using CSS classes

$('.formyoula-Repeat').addClass( 'whirl traditional' );

From Slitecom

Spinner can be appended as HTML as well.

$('.formyoula-Repeat').html('<br><div class="whirl traditional"></div><br>');

Note: The code used should be added in a Javascript element on the form.

For any questions, please contact us -

Feedback and Knowledge Base