Friday, April 4, 2014

Splash Screen

If you try to open an UI5 app inside a phone device that has a slow connection you will see a blank page for a long time. The user does not get to know if something is going wrong or he still has to wait till the device finished loading.

For that reason i am using a splash screen (app loading screen) that shows a nice animation while loading the needed library parts.

Splash Screen loading animation

To be faster than light and quicker than warp ;-) the needed markup has to be included directly into the main html file. Doing it this way the browser can instantly show the splash screen right after loading the html markup.

Using an iOS device, you have to make sure that the needed viewport-meta-tag is included in the head section:
<meta name="viewport" content="minimal-ui, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

The UI5 lib automatically injects this meta-tag on app start, but this is much too late for the loader. The UI5 library needs to load all sources using the AMD (Asynchronous Module Definition) appoach. After loading all dependencies, the framework starts manipulating the browser DOM.

CSS Animation


The animation is heavily focused on CSS3 animation. If you have to support older browsers, you can  implement a fallback that uses an animated image (gif or png) instead.

Some cool CSS3 animations can be found on the codrops website, which is my personal favorite for design resources.

Markup

At the end of the site there is a special section that covers the needed markup around the used CSS.
<div id="splash-screen">
    <div class="splash-screen-text">Loading</div>
    <div class="splash-screen-circle-outer"></div>
    <div class="splash-screen-circle-inner"></div>
</div>

On application launch, the corresponding markup will be removed from the DOM using jQuery.
$("#splash-screen").remove();

Finally the app will be launched using a small switch framework that recognizes the device readyness of native cordova apps (device container is ready) and general web apps (window is ready).

Using this approach, the user will have a visual feedback, that something is still going on and the splash-screen is also a nice goody.

Custom Splash Screen

1 comment:

Thank you for your comment!

The comment area is not intended to be used for promoting sites!
Please do not use such links or your comment will be deleted.

Holger

Note: Only a member of this blog may post a comment.