How to show loading... until whole wizard loads in jQuery-steps plugin?

Question

I am using the jQuery-steps plugin for my wizard type form. I want to show loading... animation until the whole wizard loads completely. There is label provided for this in the plugin. I just don't know how to enable it.

Any guess?

Edit :

Here is my code that generates wizard form

$(function () {
    $("#wizard").steps({
        headerTag: "h2",
        bodyTag: "form",
        saveState: true,
        transitionEffect: "slideLeft",
        onStepChanging: function stepChange(event, currentIndex, newIndex) {
            if (currentIndex > newIndex) {
                for(i=currentIndex;i>0;i--){
                    $("#sec"+i+"override").val(true);
                }
                return true;
            }

            e=event;
            ci=currentIndex;
            ni=newIndex;
            var form = $('#wizard-p-'+currentIndex);
            form.validate().settings.ignore = ":disabled,:hidden:not('.hiddenField')";
            var res = form.valid();
            if(res) {
                var ress = form.submit();
                if(check) {
                    return true ;   
                } else {
                    popup();  
                }
            }
        },
        onFinishing: function(event, currentIndex) {
            ci=currentIndex;
            var form = $('#wizard-p-'+currentIndex);
            form.validate().settings.ignore = ":disabled,:hidden:not('.hiddenField')";
            var res = form.valid();
            if(res) {
                var ress = form.submit();
                if(check) {
                    return true;    
                } else {
                    popup();
                }
            }
        },
        onFinished: function(event, currentIndex) {
            <%
            UserDTO user = UserUtils.getLoggedInUser();
            if(user!=null){
                if(user.getIsAdmin()){
                    %>    
                        window.location = "<%=application.getContextPath()%>/projects"; 
                    <%     
                } else {
                    %>            
                    window.location = "<%=application.getContextPath()%>/home";
                    <%    
                }
            }
            %>
            $.cookie('jQu3ry_5teps_St@te_' + $( this ).data( "uid" ), '' );
        }
    });
});

Now the thing is it works perfectly, but while loading the whole form it shows section title first and then the form loads which is not looking good. I just want to show loading... animation until the whole form loads.

Why don't you provide what code you have, maybe create a [fiddle](https://jsfiddle.net/), and at lest show us you've tried to conquer this task on your own. — Shaggy, Mar 09 '16 at 16:48
I unable to find,which part of code is causing to load the form late..One hint I can give you is, identify the code which causes the late loading of form. take a image on the screen, show that image before form is loading and hide it after completion of code execution.. — aravind, Mar 14 '16 at 12:45
Yes, I know this can be done. But jquery-steps plugin already provides this functionality. I just don't know how to enable it. There must be some property that should be set for this. — Half Blood Prince, Mar 14 '16 at 13:17
Have a look at this example(Async Content Loading Example). - http://www.jquery-steps.com/Examples — Half Blood Prince, Mar 14 '16 at 13:17

score 5 · Answer 1 · answered Mar 14 '16 at 12:58

If I understand the question correctly... the form is loading a little after the page loads causing the user to view the form before it is initialized by steps. If this is the case, you could add an additional div that contains your loading animation and not display your form when the page loads...

<div id="loadingIcon">
    <img src="images/loading.gif"/>
</div>
<div id="wizard" style="display: none;">
    <%-- FORM HERE --%>
</div>

And then in your onload function, hide the loading icon and display the form.

$(function () {
    $("#wizard").steps({
        // Steps
    });
    $('#loadingIcon').hide();
    $('#wizard').show();
});

How to show loading... until whole wizard loads in jQuery-steps plugin?

1 Answers1