How to add a busy indicator at the start of the page loading using sap ui5

[former_member220919]

Hi experts,

I need to add a busy indicator at the start of the page loading (even if before the ui5 library loading)

I have used the code in .html given below.

<script>

$(document).render(function () {

  $("#load").css("margin-top","0.5px");

  document.getElementById("load").innerHTML = "<tr></tr>";

});

</script>

and then the library loding code as given below.

<Script type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid,i5SPCChart"

              data-sap-ui-libs="sap.ui.core,sap.m,sap.me,sap.ui.commons,sap.makit,sap.ui.table,sap.ui.ux3,sap.viz", data-sap-ui-theme="sap_bluecrystal" >

   </script>

and the div as given below

<div id="load" style="margin-top:200px;" align="center">

  <img src="/XMII/Default/UI5/Images/DataLoading.gif" width="170" height="55" alt="Please Wait !" align="middle">

</div>

after that calling the view

createView();

The above code is not working as my expectation. All the library file getting loaded first and then the busy indication showing. Finally the page element loads. Is there any way, that I can load the busy indicator before the sap ui5 library loading

Thanks,

Srikant

I am using sap MII version 15.0  sp4 patch 11

[former_member182372]

my favourite , i use it a lot

[saivellanki]

Hi Srikanta,

Check out this nice blog, where it is clearly explained - OpenUI5 Developer: Splash Screen

Sample - JS Bin - Collaborative JavaScript Debugging

Regards,

Sai Vellanki.

[Private_Member_15166]

Use something like this.

        <script type="text/javascript">

            function appInit() {

                sap.ui.getCore().attachInit(function() {

                    new sap.ui.core.ComponentContainer({     // you can also attach page here

                        id    : "siteComponent",

                        height: "100%",

                        name  : "sitename"

                    }).placeAt("content");

                });

            }

            function appReady() {

                $("#load").remove();

                appInit();

            }

            window.onload = function () {

                appReady();

            }

        </script>

[Former Member]

Use require to load sap library and on progress show loading icon.

Ref: http://stackoverflow.com/questions/15581563/requirejs-load-script-progress