<body>
is usually left empty. This is for a good reason - any content that is in the body would simply show up on the page, as is shown in the walkthrough's "Hello world!" example. But there is an exception: if an element has an id
attribute with the value busyIndicator
, then this content will be hidden after the ui5 bootstrap code is finished and the app content is placed inside the body.<div>
element with an id
attribute with the value busyIndicator
as static content in the <body>
element. Indside that <div>
we can place anything we like. In the example, the div contains a header and a footer with static text to indicate that the application is loading. Between the header and the footer is an image of the ui5 logo, and a css animation, which superficially resembles the ui5 busy indicator animation:<body class="sapUiBody" id="content">
<!-- Loading splash screen -->
<div id="busyIndicator" style="text-align: center; font-family: Sans, Arial">
<!-- static header text -->
<h3>My UI5 App is loading</h3>
<!-- static image of the ui5logo -->
<img src="images/openui5-logo.png" class="logo"/>
<!--
loader animation
CC0 licensed code used with permission from
https://loading.io/css/
-->
<div class="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- end of loader animation -->
<!-- static footer text -->
<center><h5>This may take a few moments...</h5></center>
</div>
</body>
<link>
element in the <head>
of the page:<head>
<!-- css required for the loading screen css anumation -->
<link id="animation" rel="stylesheet" type="text/css" href="css/progress-animation.css"/>
</head>
<link>
or <style>
element. The standard ui5 mechanism to include css by declaring it in the manifest.json is no good as it will be loaded as part of the ui5 bootstrap, and the whole idea of the loading screen is to show something before the ui5 bootstrap even starts.<style>
element, rather than relying on a network request to load external css with the <link>
element.You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
11 | |
9 | |
7 | |
6 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 |