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 support@formyoula.com.

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.

I.e.

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

Hide Loader

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

I.e.

formyoula.event_trigger("main:spinner_dialog",{show:false});`

Set Custom Title and Message

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

I.e.

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

Adding a Spinner on Specific Section

I.e. 

Adding a spinner on repeat group using CSS classes

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

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 - support@formyoula.com.