Skip to Content
Author's profile photo Abhishek Modi

SAPUI5 app loading indicator – easy way

How many times did you feel that we need to improve performance of SPUI5 library? While experts are working on it, and of course it is a huge gallery of components which is not easy to manage and will contribute to initial loading times especially if it is not in cache. But the user will really feel that long waiting time only if the screen is blank or unresponsive for that time duration. This is why we place a loading indicator as soon as the page is hit and then let the SAPUI5 library load at peace while the user patiently watches the spinning indicator.

There has been a lot of solutions in various blogs, I am not sure if I am duplicating this one, but I felt this is the easiest one to implement and is provided by SAP – you just need to place your text and animation.

Your script tag looks like below, just include


as below.

<script src=""

Your body looks like below – put a div with id as busyIndicator and your animated gif inside it within img tag.

<body class='sapUiBody' id='content'>
  <div id="busyIndicator"><img src="images/spinner.gif"/></div>

You can search for loading indicator gif and you will find plenty of beautiful free spinners.

That’s it! The gif spinner should display the animation till the library loads completely and is ready for rendering.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Kedar Tingikar
      Kedar Tingikar


      One such blog - Asynchronous load of SAPUI5

      Author's profile photo Anderson Souza
      Anderson Souza

      Very good! Only add the tag STYLE

        #busyIndicator {
          width: 100px;
          height: 100px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -50px;
          margin-left: -50px;